React-Router v6 新特性解讀及遷移指南

時間  2020-03-20
標籤 react router v6 特性 解讀 遷移 指南 欄目 React 简体版
原文   原文鏈接

前言

18年初，React Router的主要開發人員建立一個名爲Reach Router的輕量級替代方案。前端

原來是相互抗衡的，卻沒想React Router直接拿來合併（真香！） react

目前 v6已經是測試最後一版，估計新的特性不出意外就是下面這些了。 git

  1. <Switch>重命名爲<Routes>。
  2. <Route>的新特性變動。
  3. 嵌套路由變得更簡單。
  4. 用useNavigate代替useHistory。
  5. 新鉤子useRoutes代替react-router-config。
  6. 大小減小：從20kb到8kb

1. <Switch>重命名爲<Routes>

該頂級組件將被重命名。可是，其功能大部分保持不變（嗨，瞎折騰）。github

// v5
<Switch>
    <Route exact path="/"><Home /></Route>
    <Route path="/profile"><Profile /></Route>
</Switch>

// v6
<Routes>
    <Route path="/" element={<Home />} />
    <Route path="profile/*" element={<Profile />} />
</Routes>
複製代碼

2. <Route>的新特性變動

component/render被element替代npm

總而言之，簡而言之。就是變得更好用了。bash

import Profile from './Profile';

// v5
<Route path=":userId" component={Profile} />
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>

// v6
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true} />} />
複製代碼

3. 嵌套路由變得更簡單

具體變化有如下：微信

  • <Route children> 已更改成接受子路由。
  • 比<Route exact>和<Route strict>更簡單的匹配規則。
  • <Route path> 路徑層次更清晰。

3.1 簡化嵌套路由定義

v5中的嵌套路由必須很是明肯定義，且要求在這些組件中包含許多字符串匹配邏輯（活久見啊，終於意識到這個問題了。）react-router

且看以前的處理：app

// v5
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </BrowserRouter>
  );
}

function Profile() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${path}/me`}>
          <MyProfile />
        </Route>
        <Route path={`${path}/:id`}>
          <OthersProfile />
        </Route>
      </Switch>
    </div>
  );
}
複製代碼

而在v6中，你能夠刪除字符串匹配邏輯。不須要任何useRouteMatch()！dom

// v6
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile/*" element={<Profile/>} />
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path="me" element={<MyProfile />} />
        <Route path=":id" element={<OthersProfile />} />
      </Routes>
    </div>
  );
}
複製代碼

固然，還有更酸爽的操做，直接在路由裏定義<Route>的<Route>，而後用接下來的一個新API：Outlet

3.2 新API:Outlet

這玩意兒，像極了{this.props.children}，具體用法看如下例子：

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile" element={<Profile />}>
          <Route path=":id" element={<MyProfile />} />
          <Route path="me" element={<OthersProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>
        {/*
       將直接根據上面定義的不一樣路由參數，渲染<MyProfile />或<OthersProfile />
        */}
      <Outlet />
    </div>
  )
}
複製代碼

3.3 多個<Routes />

之前，咱們只能 在React App中使用一個 Routes。可是如今咱們能夠在React App中使用多個路由，這將幫助咱們基於不一樣的路由管理多個應用程序邏輯。

import React from 'react';
import { Routes, Route } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <p>Look, more routes!</p>
      <Routes>
        <Route path="/" element={<DashboardGraphs />} />
        <Route path="invoices" element={<InvoiceList />} />
      </Routes>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard/*" element={<Dashboard />} />
    </Routes>
  );
}
複製代碼

4. 用useNavigate代替useHistory

從一目瞭然改到雙目失明。。。

總感受React Router團隊有點兒戲。。。

// v5
import { useHistory } from 'react-router-dom';

function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};
複製代碼

如今，history.push()將替換爲navigation()：

// v6
import { useNavigate } from 'react-router-dom';

function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};
複製代碼

history的用法也將被替換成：

// v5
history.push('/home');
history.replace('/home');

// v6
navigate('/home');
navigate('/home', {replace: true});
複製代碼

5. 新鉤子useRoutes代替react-router-config。

感受又是一波強行hooks，但仍是相對於以前簡潔了一些。。。

function App() {
  let element = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'dashboard', element: <Dashboard /> },
    { path: 'invoices',
      element: <Invoices />,
      children: [
        { path: ':id', element: <Invoice /> },
        { path: 'sent', element: <SentInvoices /> }
      ]
    },
    // 重定向
    { path: 'home', redirectTo: '/' },
    // 404找不到
    { path: '*', element: <NotFound /> }
  ]);
  return element;
}
複製代碼

6. 大小減小：從20kb到8kb

React Router v6給咱們帶來方便的同時，還把包減小了一半以上的體積。。。

感受能夠去看一波源碼了。。。

7. 遷移及其它重要修復...

官方的遷移指南在這裏：React Router v6遷移指南

其實上面所列的新特性，基本就是遷移的所有內容了。

基礎的起手式就是更新包：

$ npm install react-router@6 react-router-dom@6
# or, for a React Native app
$ npm install react-router@6 react-router-native@6
複製代碼

其中我以爲特別須要注意的一點是：React Router v6使用簡化的路徑格，僅支持2種佔位符：動態:id樣式參數和*通配符

如下都是v6中的有效路由路徑：

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*
/files-*
複製代碼

使用RegExp正則匹配的路徑將無效：

/users/:id?
/tweets/:id(\d+)
/files/*/cat.jpg
複製代碼

v6中的全部路徑匹配都將忽略URL上的尾部"/"。實際上，<Route strict>已被刪除而且在v6中無效。這並不意味着您不須要使用斜槓。

在v5版本以前的路徑，存在路由歧義

  1. 當前路徑:"/users"，則<Link to="me">將跳轉<a href="/me">。
  2. 當前路徑:"/users/"，則<Link to="me">將跳轉<a href="/users/me">。

React Router v6修復了這種歧義，取消了尾部"/"：

  1. 當前路徑:"/users"，則<Link to="me">將跳轉<a href="/users/me">。
  2. 當前路徑:"/users"，則<Link to="../me">將跳轉<a href="/me">。

其形式更像命令行cd的用法：

// 當前路徑爲 /app/dashboard 

<Link to="stats">               // <a href="/app/dashboard/stats">
<Link to="../stats">            // <a href="/app/stats">
<Link to="../../stats">         // <a href="/stats">
<Link to="../../../stats">      // <a href="/stats">

// 命令行當前路徑爲 /app/dashboard
cd stats                        // pwd is /app/dashboard/stats
cd ../stats                     // pwd is /app/stats
cd ../../stats                  // pwd is /stats
cd ../../../stats               // pwd is /stats
複製代碼

結語

參考文章：

  1. A Sneak Peek at React Router v6
  2. What’s new in React Router v6
  3. React Router v6 in Three Minutes
  4. Migrating React Router v5 to v6

❤️ 看完三件事

若是你以爲這篇內容對你挺有啓發，我想邀請你幫我三個小忙：

  1. 點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
  2. 關注公衆號「前端勸退師」，不按期分享原創知識。
  3. 也看看其它文章

勸退師我的微信： huab119

也能夠來個人GitHub博客裏拿全部文章的源文件：

前端勸退指南：github.com/roger-hiro/… 一塊兒玩耍呀。~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程