react-router-domV6版本改版踩坑

HL477

已于 2022-02-11 22:40:10 修改

阅读量3.6k

点赞数 10

文章标签： react.js javascript 前端

于 2022-01-15 14:06:29 首次发布

本文链接：https://blog.csdn.net/HL477/article/details/122509415

版权

本文详细对比了react-router-dom V5与V6在父组件注册路由、NavLink高亮、Switch替换、Redirect重定向、嵌套路由、参数传递、编程式导航等方面的变化，包括如何在函数组件中使用useEffect和替代withRouter的useNavigate。

摘要由CSDN通过智能技术生成

1.父组件注册路由:
v5版本：

import { Route } from 'react-router-dom'
<Route path="/about" component={About} />
<Route path="/home" component={Home} />

v6版本：

import { Route } from 'react-router-dom'
<Route path="about" element={<About />} />
<Route path="home" element={<Home />} />

2.NavLink点击高亮显示
v5版本：

import { NavLink } from 'react-router-dom'
<NavLink activeClassName="highlight" className="about"  to="/about" >About</NavLink>

v6版本：

以下二者选一即可，一定要注意 （isActive ? " highlight"） highlight前面的空格！！！
// 官方写法
<NavLink className={({ isActive }) => "about" + (isActive ? " highlight" : "")} to="about">About</NavLink>
// ES6 模版字符串写法 
<NavLink className={({ isActive }) => `about ${isActive ? "highlight" : ""}`} to="about">About</NavLink>

3.Switch（单一匹配）更换为Routes

import { Routes,Route } from 'react-router-dom'
<Routes>
	<Route path="about" element={<About />} />
	<Route path="home" element={<Home />} />
</Routes>

4.Redirect重定向
v5版本：

import ｛ Redirect ｝from 'react-router-dom'
<Routes>
	<Route path="/about" element={<About />} />
	<Route path="/home" element={<Home />} />
	// 写在这里
	<Redirect to="/about" />
</Routes>

v6版本：

import ｛ Navigate ｝from 'react-router-dom'
<Routes>
	<Route path="about/*" element={<About />} />
	<Route path="home/*" element={<Home />} />
	// 写在这里
	<Route path="/*" element={<Navigate to="/about" />} />
</Routes>

5.嵌套路由
v5版本:

// 父组件
<Route path="home/" element={<Home />} />
// 路由链接
<NavLink  className="about"  to="/home/news" >News</NavLink>
// 注册路由和重定向
<Switch>
	<NavLink  className="news"  to="/home/news" >News</NavLink>
	<NavLink  className="message"  to="/home/message" >Message</NavLink>
	<Redirect to="/home/news" />
</Switch>