本文详细介绍了ReactRouterv5到v6的主要变化，包括内置组件的更新、语法的调整以及新引入的Hook。重点讲解了路由器的基本使用，如BrowserRouter、HashRouter、Routes、Route、Link、NavLink、Navigate、嵌套路由以及useRoutes()的使用方法。同时提到了ReactRouterv6中对函数式组件的推荐和对类组件的支持情况。
系列文章目录
第一章：React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）
第二章：React基础知识（组件实例三大核心属性state、props、refs）（二）
第三章：React基础知识（事件处理、受控组件与非受控组件、高阶函数、组件的生命周期）（三）
第四章：React脚手架应用（创建脚手架、代理配置、ajax相关、组件通信）（四）
第五章：react-router5路由相关一（路由相关概念、基本使用、NavLink与NavLink的封装、Switch的使用、严格匹配、路由重定向、路由组件与一般组件的区别）（五）
第六章：react-router5路由相关二（嵌套路由、路由传参、replace、编程式路由导航、withRouter的使用、BrowserRouter与HashRouter的区别）（六）
第七章：React-Router6路由相关一（路由的基本使用、重定向、NavLink·、路由表、嵌套路由）（七）
第八章：React-Router6路由相关二（路由传参、编程式路由导航、路由相关hooks）（八）
第九章：React相关扩展一（setState、lazyLoad、Hooks相关）（九）
第十章：React相关扩展二（Fragment、Content、组件优化、render props、错误边界）（十）
第十一章：Redux相关知识（什么是redux、redux的工作原理、redux的核心概念、redux的基本使用）(十一)
第十二章：React-Redux相关知识(什么是react-redux、react-redux的原理、react-redux相关API、react-redux的基本使用)（十二）
文章目录
与React Router 5.x 版本相比，改变了什么？
内置组件的变化：移除
<Switch/>，新增<Routes/>等。语法的变化：
component={About}变为element={<About/>}等。新增多个hook：
useParams、useNavigate、useMatch等。官方明确推荐函数式组件了！！！
…
一、路由的基本使用
1.1 <BrowserRouter>
-
说明：
<BrowserRouter>用于包裹整个应用。 -
示例代码：
import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( <BrowserRouter> {/* 整体结构（通常为App组件） */} </BrowserRouter>,root );
1.2 <HashRouter>
- 说明： 作用与
<BrowserRouter>一样，但<HashRouter>修改的是地址栏的hash值。 - 备注： 6.x版本中
<HashRouter>、<BrowserRouter>的用法与 5.x 相同。
1.3 <Routes/> 与 <Route/>
-
v6版本中移出了先前的
<Switch>，引入了新的替代者：<Routes>。 -
<Routes>和<Route>要配合使用，且必须要用<Routes>包裹<Route>。 -
<Route>相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。 -
<Route caseSensitive>属性用于指定：匹配时是否区分大小写（默认为 false）。 -
当URL发生变化时，
<Routes>都会查看其所有子<Route>元素以找到最佳匹配并呈现组件 。 -
<Route>也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过<Outlet>组件来渲染其子路由。 -
示例代码：
<Routes> /*path属性用于定义路径，element属性用于定义当前路径所对应的组件*/ <Route path="/login" element={<Login />}></Route> /*用于定义嵌套路由，home是一级路由，对应的路径/home*/ <Route path="home" element={<Home />}> /*test1 和 test2 是二级路由,对应的路径是/home/test1 或 /home/test2*/ <Route path="test1" element={<Test/>}></Route> <Route path="test2" element={<Test2/>}></Route> </Route> //Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx <Route path="users"> <Route path="xxx" element={<Demo />} /> </Route> </Routes>
代码片段：
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App'
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
)
App.jsx
import React from 'react'
import {NavLink,Routes,Route} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
export default function App() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>React Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 路由链接 */}
<NavLink className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 注册路由 */}
<Routes>
<Route path="/about" element={<About/>}/>
<Route path="/home" element={<Home/>}/>
</Routes>
</div>
</div>
</div>
</div>
</div>
)
}
About.jsx
import React from 'react'
export default function About() {
return (
<h3>我是About的内容</h3>
)
}
Home.jsx
import React from 'react'
export default function Home() {
return (
<h3>我是Home的内容</h3>
)
}
运行结果：
二、<Navigate>重定向
-
作用：只要
<Navigate>组件被渲染，就会修改路径，切换视图。 -
replace属性用于控制跳转模式（push 或 replace，默认是push）。 -
示例代码：
<Navigate to="/about" replace={true}/>
代码片段（为节省空间，该案例App、About、index的代码和上述第一个案例一致，不在重复描述）：
App.jsx
import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
export default function App() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>React Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 路由链接 */}
<NavLink className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 注册路由 */}
<Routes>
<Route path="/ABOUT" element={<About/>}/>
<Route path="/home" element={<Home/>}/>
<Route path="/" element={<Navigate to="/about"/>}/>
</Routes>
</div>
</div>
</div>
</div>
</div>
)
Home.jsx
import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'
export default function Home() {
const [sum,setSum] = useState(1)
return (
<div>
<h3>我是Home的内容</h3>
{sum === 2 ? <Navigate to="/about" replace={true}/> : <h4>当前sum的值是：{sum}</h4>}
<button onClick={()=>setSum(2)}>点我将sum变为2</button>
</div>
)
}
运行结果：
三、Link和NavLink
3.1 <Link>
-
作用: 修改URL，且不发送网络请求（路由链接）。
-
注意: 外侧需要用
<BrowserRouter>或<HashRouter>包裹。 -
示例代码：
import { Link } from "react-router-dom"; function Test() { return ( <div> <Link to="/路径">按钮</Link> </div> ); }
3.2 <NavLink>
-
作用: 与
<Link>组件类似，且可实现导航的“高亮”效果。 -
示例代码：
// 注意: NavLink默认类名是active，下面是指定自定义的class //自定义样式 <NavLink to="login" className={({ isActive }) => { console.log('home', isActive) return isActive ? 'base one' : 'base' }} >login</NavLink> /* 默认情况下，当Home的子组件匹配成功，Home的导航也会高亮， 当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。 */ <NavLink to="home" end >home</NavLink>
案例片段：（为节省空间，该案例Home、About、index的代码和上述第一个案例一致，不在重复描述）：
App.jsx
import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
export default function App() {
function computedClassName({isActive}){
return isActive ? 'list-group-item atguigu' : 'list-group-item'
}
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>React Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 路由链接 */}
<NavLink className={computedClassName} to="/about">About</NavLink>
<NavLink className={computedClassName} to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 注册路由 */}
<Routes>
<Route path="/ABOUT" element={<About/>}/>
<Route path="/home" element={<Home/>}/>
<Route path="/" element={<Navigate to="/about"/>}/>
</Routes>
</div>
</div>
</div>
</div>
</div>
)
}
运行结果：
四、路由表useRoutes()
- 作用： 根据路由表，动态创建
<Routes>和<Route>。 - 注意：
路由表的使用方式的必须是Hooks的方式，即组件必须是函数组件，类组件无法实现。 - 使用路由表文件有如下三步骤：
- 导入路由表文件
- 注册路由表
- 使用路由表
案例片段：（为节省空间，该案例Home、About、index的代码和上述第一个案例一致，不在重复描述）：
App.jsx
import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
//导入路由表文件
import routes from './routes'
export default function App() {
//根据路由表生成对应的路由规则(注册路由表)
const element = useRoutes(routes)
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>React Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 路由链接 */}
<NavLink className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 使用路由表 */}
{element}
</div>
</div>
</div>
</div>
</div>
)
}
routes.js
import About from '../pages/About'
import Home from '../pages/Home'
import {Navigate} from 'react-router-dom'
export default [
{
path:'/about',
element:<About/>
},
{
path:'/home',
element:<Home/>
},
{
path:'/',
element:<Navigate to="/about"/>
}
]
运行结果：
五、嵌套路由<Outlet>
当<Route>产生嵌套时，渲染其对应的后续子路由。
案例片段：（为节省空间，该案例App、About、index的代码和上述路由表案例一致，不在重复描述）：
Home.jsx
import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'
export default function Home() {
return (
<div>
<h2>Home组件内容</h2>
<div>
<ul className="nav nav-tabs">
<li>
<NavLink className="list-group-item" to="news">News</NavLink>
</li>
<li>
<NavLink className="list-group-item" to="message">Message</NavLink>
</li>
</ul>
{/* 指定路由组件呈现的位置 */}
<Outlet />
</div>
</div>
)
}
Message.jsx
import React from 'react'
export default function Message() {
return (
<div>
<ul>
<li>
<a href="/message1">message001</a>
</li>
<li>
<a href="/message2">message002</a>
</li>
<li>
<a href="/message/3">message003</a>
</li>
</ul>
</div>
)
}
News.jsx
import React from 'react'
export default function News() {
return (
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
)
}
routes.js
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import {Navigate} from 'react-router-dom'
export default [
{
path:'/about',
element:<About/>
},
{
path:'/home',
element:<Home/>,
children:[
{
path:'news',
element:<News/>
},
{
path:'message',
element:<Message/>
}
]
},
{
path:'/',
element:<Navigate to="/about"/>
}
]
运行结果：
扫一扫
2220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
