react-router-dom6.x版本使用
2022-03-23 本文已影响0人
十年之后_b94a
1、安装依赖
npm i react-router-dom
2、引入实现路由所需的组件，以及页面组件
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Foo from './Foo';
import Bar from './Bar';
function App(){
return (
<BrowserRouter>
<Routes>
<Route path='/foo' element={Foo} />
<Route path='/bar' element={Bar} />
</Routes>
</BrowserRouter>
)
}
注意：BrowserRouter组件最好放在最顶层所有组件之外，这样能确保内部组件使用Link做路由跳转时不出错
3、Switch 重命名为Routes (用法如上)
4、路由跳转
在跳转路由时，如果路径是/开头的则是绝对路由，否则为相对路由，即相对于“当前URL”进行改变
5、Link组件
Link组件只能在Router内部使用，因此使用到Link组件的组件一定要放在顶层的Router之内
import { Link } from 'react-router-dom';
<Link to='foo'>to foo</Link>
6、NavLink组件
-
NavLink组件和Link组件的功能是一致的，区别在于可以判断其to属性是否是当前匹配到的路由 -
NavLink组件的style或className可以接收一个函数，函数接收一个isActive参数，可根据该参数调整样式
import { NavLink } from 'react-router-dom';
function Foo(){
return (
<NavLink
style={ (isActive) => ({color: isActive ? 'red' : '#fff'}) }
>Click here</NavLink>
)
}
7、Outlet (渲染任何匹配的子级路由页面)
管理端（后台）项目用这个api较为常见
return (
<div className="A">
<h3>我是A组件 --------- 编程式路由导航使用示例</h3>
<div className="A-navBox">
<Button type="primary" onClick={() => navigateRouter(1, 1, "i am Jason Ma")}>
params传参
</Button>
<Button onClick={() => navigateRouter(2, 18, "i am Jason Ma")}>search传参</Button>
<Button type="dashed" onClick={() => navigateRouter(3, 999, "i am Jason Ma")}>
state传参
</Button>
</div>
{/* 渲染任何匹配的子级路由页面 */}
<Outlet></Outlet>
</div>
);
8、获取params参数
- 在
Route组件中的path属性中定义路径参数 - 在组件内通过
useParams hook访问路径参数
<BrowserRouter>
<Routes>
<Route path='/foo/:id' element={Foo} />
</Routes>
</BrowserRouter>
import { useParams } from 'react-router-dom';
export default function Foo(){
const params = useParams();
return (
<div>
<h1>{params.id}</h1>
</div>
)
}
在以前版本中，组件的props会包含一个match对象，在其中可以取到路径参数。但在最新的6.x版本中，无法从props获取参数。
并且，针对类组件的withRouter高阶组件已被移除。因此对于类组件来说，使用参数有两种兼容方法：
1.将类组件改写为函数组件
2.自己写一个HOC来包裹类组件，用useParams获取参数后通过props传入原本的类组件
9、编程式路由导航用useNavigate代替useHistory（JS路由跳转）
使用useNavigate钩子函数生成navigate对象，可以通过JS代码完成路由跳转，不可以在类组件中使用useNavigate函数，可以改成函数组件或者在外包裹一层withRouter来解决
// 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});
10、search参数
- 查询参数不需要在路由中定义
- 使用
useSearchParams hook来访问查询参数。其用法和useState类似，会返回当前对象和更改它的方法 - 更改
searchParams时，必须传入所有的查询参数，否则会覆盖已有参数
import { useSearchParams } from 'react-router-dom';
// 当前路径为 /foo?id=12
function Foo(){
const [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get('id')) // 12
setSearchParams({
name: 'foo'
}) // /foo?name=foo
return (
<div>foo</div>
)
}
11、默认路由
定义： 在嵌套路由中，如果URL仅匹配了父级URL，则Outlet中会显示带有index属性的路由
<Routes>
<Route path='/foo' element={Foo}>
<Route index element={Default}></Route>
<Route path='bar' element={Bar}></Route>
</Route>
</Routes>
- 当url为/foo时：Foo中的Outlet会显示Default组件
- 当url为/foo/bar时：Foo中的Outlet会显示为Bar组件
- 注意：目前我的index无法设置默认子路由（可以用Navigite重定向实现类似的默认功能，需要默认的路由设置一个指向子路由的重定向，但是体验会差一点，有点顿）
12、全匹配路由
定义： path属性取值为*时，可以匹配任何（非空）路径，同时该匹配拥有最低的优先级。可以用于设置404页面。
<Routes>
<Route path='/foo' element={Foo}>
<Route path='bar' element={Bar}></Route>
<Route path='*' element={NotFound}></Route>
</Route>
</Routes>
13、多组路由
通常，一个应用中只有一个Routes组件。
但根据实际需要也可以定义多个路由出口（如侧边栏和主页面都要随URL而变化）
<Router>
<SideBar>
<Routes>
<Route></Route>
</Routes>
</SideBar>
<Main>
<Routes>
<Route></Route>
</Routes>
</Main>
</Router>
14、重定向
当在某个路径/a下，要重定向到路径/b时，可以通过Navigate组件进行重定向到其他路径
等价于以前版本中的Redirect组件
import { Navigate } from 'react-router-dom';
function A(){
return (
<Navigate to="/b" />
)
}
