React Router v5 和 v6 的比较

Router v5 和 v6 的比较"/>

React Router v5 和 v6 的比较

v5 是老的版本， v6 是最新版，v6 比 v5 好，所以应尽可能使用 v6，安装 v6 命令如下：

npm install react-router-dom@6

或者

npm install react-router-dom@latest

以下是两个版本之间的区别：

1. v6 中 Switch 名称变为 Routes

import { Routes } from "react-router-dom";
function App() {return (<Layout><Routes>....... </Routes></Layout>);
}

2. v6 <Route> 不再支持子组件，改为使用 element 属性

<Route path="/quotes" ><AllQuotes />
</Route>

变为：

<Route path="/quotes" element={<AllQuotes />} />     

3. v6 中， exact 属性不再需要

v6 内部算法改变，不再需要加 exact 实现精确匹配路由，默认就是匹配完整路径。

如果需要旧的行为，路径后加 /*

<Route path="/products/*" element={<Products />} />
<Route path="/products/:productId" element={<ProductDetail />} />

4. v6 中，Route 先后顺序不再重要，React Router 能够自动找出最优匹配路径

5. v6 保留 Link， NavLink， 但是 NavLink 的 activeClassName 属性被移除。

使用类似下面 code 获得activeClassName的功能：

<NavLink className={navData=>navData.isActive?class.active : ""}

也可以不用 className, 而是使用 style。

6. v6 移除 Redirect组件，改为使用 Navigate:

<Route path="/" element ={<Navigate replace to="/welcome" />} />

<Navigate replace to="/welcome" /> 是对旧的 Redirect 的完整取代。
replace 属性也可以省略，不过行为由 replace 改为 push

7. v6 嵌套路由改为相对匹配

7.1 方法1

嵌套路由 必须 放在<Routes> </Routes> 中，且使用相对路径，不再像 v5 那样必须提供完整路径，因此路径变短。

const Welcome=() => {return <section><h1>Welcome</h1><Routes><Route path="new-user" element={<p>Welcome, new user</p>} /></Routes></section>
}
export default Welcome;

如果有 Link 组件，那么其 to 属性也使用相对路径。

App.js:

<Routes><Route path="/welcome/*"  element={<Welcome />} />
</Routes>

7.2 方法2， 嵌套路由直接移到 App.js

使用 Outlet 组件，此组件是一个占位符，告诉 React Router 嵌套的内容应该放到哪里。

import {Outlet} from "react-router-dom";
const Welcome=() => {return <section><h1>Welcome</h1><Outlet /></section>
}
export default Welcome;

嵌套的路由放到 App.js 文件中：

<Routes><Route path="/welcome/*"  element={<Welcome />} <Route path="new-user" element={<p>Welcome, new user</p>} /><Route/>
</Routes>

8. v6 用 useNavigate 实现编程式导航，useHistory 被移除

用法：

import {useNavigate} from "react-router-dom";
const navigate = useNavigate();
navigate("/welcome");   // push

如果要重定向:

navigate("/welcome", {replace: true});  

除此之外，还可以使用 navigate(-1) 后退到前一页，使用 navigate(-2)后退到前一页的前一页， navigate(1)前向导航，依此类推。

9. 缺点： v6 目前没有 Prompt 组件阻止不期望的导航。

将来可能会有类似的组件，但目前没有，如果在 v6 中要实现相应的功能，必须自己想办法，这可能是目前 v5 唯一的优势。