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做路由跳转时不出错
一、Switch重命名为Routes
// v5
<Switch>
<Route exact path="/"><Home /></Route>
<Route path="/profile"><Profile /></Route>
</Switch>
// v6
<Routes>
<Route path="/" element={<Home />} />
<Route path="profile/*" element={<Profile />} />
</Routes>
二、Route的新特性变更
component/render被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} />} />
三、路由跳转
在跳转路由时,如果路径是/开头的则是绝对路由,否则为相对路由,即相对于“当前URL”进行改变
四、Link组件
Link组件只能在Router内部使用,因此使用到Link组件的组件一定要放在顶层的Router之内
import { Link } from 'react-router-dom';
<Link to='foo'>to foo</Link>
五、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>
)
}
六、Outlet (渲染任何匹配的子级路由页面)
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>
);
七、获取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高阶组件已被移除。因此对于类组件来说,使用参数有两种兼容方法:
将类组件改写为函数组件
字节写一个HOC来包裹类组件,用useParams获取参数后通过props传入原本的类组件
八、编程式路由导航用useNavigate代替useHistory
使用useNavigate钩子函数生成navigate对象,可以通过JS代码完成路由跳转
// 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});
九、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>
)
}
十、默认路由
定义: 在嵌套路由中,如果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组件
十一、全匹配路由
定义: path属性取值为*时,可以匹配任何(非空)路径,同时该匹配拥有最低的优先级。可以用于设置404页面。
<Routes>
<Route path='/foo' element={Foo}>
<Route path='bar' element={Bar}></Route>
<Route path='*' element={NotFound}></Route>
</Route>
</Routes>
十二、多组路由
通常,一个应用中只有一个Routes组件。
但根据实际需要也可以定义多个路由出口(如侧边栏和主页面都要随URL而变化)
<Router>
<SideBar>
<Routes>
<Route></Route>
</Routes>
</SideBar>
<Main>
<Routes>
<Route></Route>
</Routes>
</Main>
</Router>
十三、重定向
当在某个路径/a下,要重定向到路径/b时,可以通过Navigate组件进行重定向到其他路径
等价于以前版本中的Redirect组件
import { Navigate } from 'react-router-dom';
function A(){
return (
<Navigate to="/b" />
)
}
本文为转载文章
版权声明:本文为CSDN博主「Jason Ma丶丶前端工程师」的原创文章
原文链接:https://blog.csdn.net/qq_42753705/article/details/121871363