- React实现页面路由的模块：
react-router-dom
- 在 React Router 中有三种类型的组件：路由器组件，路由匹配组件，导航组件。这些组件都来自于
react-router-dom。
1 路由器组件：< HashRouter > < BrowserRouter >
对于每一个 React Router 应用来说，都应该有一个路由器组件，它们会为应用创建一个专用的 history 对象。
针对 Web 项目，react-router-dom 提供了 <BrowserRouter> 和 <HashRouter>。
主要区别：
- BrowserRouter 和 HashRouter 都可以实现前端路由的功能
- BrowserRouter 实现的是单页面的路由切换
- HashRouter 实现的是全局路由切换
从原理上：
- HashRouter在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter，和散列没关系哦）
- 而BrowserRouter使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。
从用法上：
- BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信，
- HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。
其实就是路由的hash和history两种模式，并且这两个组件是路由的容器，必须在最外层。
<HashRouter>
...
</HashRouter>
<BrowserRouter>
...
</BrowserRouter>
2. 路由
2.1 < Route >
-
路由匹配是通过比较 <Route> 组件的 path 属性和当前地址的 pathname 实现的
-
如果匹配则渲染当前路由组件的内容，如果不匹配则渲染 null。
-
注意：没有提供 path 属性的 <Route> 组件将总是匹配。
2.1.1 < Route element >
- Route的 render 或 component 改为 element
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} />} />
<Route path=":userId" element={<Profile animate={true} /> />
function Profile({ animate }) {
const params = useParams();
const location = useLocation();
}
通过这种形式：
1. 可以向组件传 props，如上面的 animate={true}
2. 因为有了 hook 的出现，所以不必再通过 renderProps 向组件传递路由的一些 props，我们可以通过useParams、useLocation 就可以拿到这些信息
- v6 Route 的 children 是用于嵌套路由
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/users" element={<Users />}>
<Route path="me" element={<OwnUserProfile />} />
<Route path=":id" element={<UserProfile />} />
</Route>
</Routes>
</BrowserRouter>
那么我们要显示 OwnUserProfile 组件的话通过/users/me 就可以定位到了，这看起来相当的直观
2.1.2 < Route path >
v6 简化了 path 的格式，只支持两种动态占位符。
- :id 样式参数
- *通配符，只能在path的末尾使用，如 users / *
正确的格式：
path = '/groups'
path = '/groups/admin'
path = '/users/:id'
path = '/users/:id/messages'
path = '/files/*' // 通配符放在末尾
path = '/files/:id/*'
path = '/files-*'
错误的格式：
path = '/users/:id?' // ? 不满足上面两种格式
path = '/tweets/:id(\d+)' // 有正则，不满足上面两种格式
path = '/files/*/cat.jpg'// 通配符不能放中间
2.1.3 < Route index >
index 即表示是否是主路由，如果设置为 true 的话不能有 children
<Routes>
<Route element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />}/>
...
</Route>
</Routes>
2.1.4 < Outlet >
<Outlet/> 的作用类似插槽，用于匹配子路由的 element
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route exact path={'/'} element={<Login />}/>
<Route path={'/login'} element={<Login />}/>
匹配到/index里面开始渲染<PrivateRoute/> 组件
<PrivateRoute/> 返回<Outlet>相当于 开始渲染当前路由的子路由
<Route path={'/index'} element={<PrivateRoute/>}>
即开始渲染<Layoutdemo/>组件
<Route path={'/index'} element={<Layoutdemo/>}>
<Route path={'/index/goods'} element={<Goods/>}/>
<Route path={'/index/addgoods'} element={<AddGoods/>}/>
<Route path={'/index/category'} element={<Category/>}/>
</Route>
</Route>
</Routes>
</BrowserRouter>
</div>
);
}
let jian = () =>{ //判断用户登录信息是否存在token 存在返回true 跳进主页面
const token = sessionStorage.getItem('token');
return token ? true : false;
}
const PrivateRoute = () => {
return jian() ? <Outlet/> : <Navigate to={'/login'}/>
}
所有路由的定义放在最外边的组件里面 层次清楚
2.1.5 useRoutes()
上面我们都是把 Route 作为 Routes 的 children
function App() {
return (
<Routes>
<Route path='/' element={<Layout />}>
<Route path='auth/*' element={<Auth/> } />
<Route path='basic/*' element={<Basic/> } />
</Route>
</Routes>
)
}
我们还可以通过useRoutes生成对应的 element 这种配置项让我们可以清晰地看出路由的嵌套结构
import { useRoutes } from 'react-router-dom'
function App() {
const element = useRoutes([
{
path: '/',
element: <Layout />,
children: [
{
path: 'auth/*',
element: <Auth/>
},
{
path: 'basic/*',
element: <Basic/>
}
]
}
])
return (
{element}
)
}
2.2 路由：< Switch >全部改为< Routes >
该顶级组件将被重命名。但是，其功能大部分保持不变。
<Switch>：
-
<Switch> 组件用于给 <Route> 组件分组，可以将一组 <Route> 组件嵌套在 <Switch> 组件中。
-
<Route> 组件通过比较它的 path 属性和当前地址来判断是否渲染它的内容，所以就会存在多个 <Route> 匹配成功且都渲染它们内容的情况。为了避免这样的情况，<Switch> 组件就起了作用，它会迭代当中的 <Route> 组件，并选出第一个匹配的 <Route> 来渲染
// v5
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/contact' component={Contact} />
{/* when none of the above match, <NoMatch> will be rendered */}
<Route component={NoMatch} />
</Switch>
<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.3 导航 < Link >和< NavLink >
两者都是跳转路由，NavLink的参数更多些。
2.3.1 < Link to >
-
在v5中，如果 to 不以 / 开头的话会让人有点迷，因为这取决于当前的 URL。
-
比如当前 URL 是/user, 那么<Link to="me"> 会渲染成 <a href="/me">
-
如果是 /users/，那么又会渲染成 <a href="/users/me">
-
在 v6 中，无论当前 URL 是/user还是/users/, <Link to="me">都会渲染成<a href='/user/me'>。
-
也就是说 to 更像我们常用的 cd 命令行
<Route path="app">
<Route path="dashboard">
<Route path="stats" />
</Route>
</Route>
// 当前 URL 为 /app/dashboard 或 /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
2.3.2 < Link replace >
replace:boolean ---->默认 false，即跳转路由要用 push 还是 replace
2.4 useNavigate
- useHistory 被干掉了，换成了 useNavigate
import { useNavigate } from "react-router-dom";
function App() {
const navigate = useNavigate();
function handleClick() {
navigate("/home");
}
return (
<div>
<button onClick={handleClick}>go home</button>
</div>
);
}
-
aviaget(to)默认就是 history.push 在当前路径上加上参数值
// v6
navigate('/home');
//v5
history.push('/home')
- naviaget(to, { replace: true })就是 history.replace
// v6
navigate('/home', { replace: true });
//v5
history.replace('/home')
- naviaget(to: number)就是 history.go
// v6
import { useNavigate } from "react-router-dom";
function App() {
const navigate = useNavigate();
return (
<>
<button onClick={() => navigate(-2)}>
Go 2 pages back
</button>
<button onClick={() => navigate(-1)}>Go back</button>
<button onClick={() => navigate(1)}>
Go forward
</button>
<button onClick={() => navigate(2)}>
Go 2 pages forward
</button>
</>
);
}
// v5
import { useHistory } from "react-router-dom";
function App() {
const { go, goBack, goForward } = useHistory();
return (
<>
<button onClick={() => go(-2)}>
Go 2 pages back
</button>
<button onClick={goBack}>Go back</button>
<button onClick={goForward}>Go forward</button>
<button onClick={() => go(2)}>
Go 2 pages forward
</button>
</>
);
}
- naviagete 与一样， 输入参数类似 cd 命令行
<Route path="app">
<Route path="dashboard">
<Route path="stats" />
</Route>
</Route>
// 当前 URL 为 /app/dashboard 或 /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">
// 当前 URL 为 /app/dashboard 或 /app/dashboard/
const navigate = useNavigate()
navigate('stats') => '/app/dashboard/stats'
navigate('../stats') => '/app/stats'
navigate('../../stats') => '/stats'
navigate('../../../stats') => '/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
