React Router（三）

留奇

已于 2023-06-25 16:44:16 修改

阅读量118

点赞数

分类专栏： React从入门到中级文章标签： react.js

于 2023-04-13 20:09:31 首次发布

本文链接：https://blog.csdn.net/lqiqil/article/details/130028660

版权

本文介绍了react-router-dom V6的基础操作，包括路由表的创建和管理，以及不同类型的参数传递方式，如问号传参、路径参数和隐式传参。重点讲解了编程式导航、Hook函数的使用，如useNavigate、useSearchParams和useParams，以实现动态路由和组件间的数据传递。

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

react-router-dom V6版本的基础操作

在react-router-dom V6版本中，移除了：

Switch -> 替代方案：Routes
Redirect -> 替代方案：Navigate
withRouter -> 替代方案：自己写一个withRouter

所有的路由匹配规则，放在<Routes.>中；每一条规则的匹配，还是基于<Route.>

路由匹配成功，不再基于component/render控制渲染的组件，而是基于element，语法格式是<Component./>
不再需要Switch，默认就是一个匹配成功，就不再匹配下面的了
不再需要exact，默认每一项匹配都是精准匹配

原有的<Redirect.>操作，被 <Navigate. to=“/” /> 代替

遇到 <Navigate./> 组件，路由就会跳转，跳转到to指定的路由地址
设置 replace 属性，则不会新增历史记录，而是替换现有记录
<Navigate. to={ {…}}/> to的值可以是一个对象：pathname需要跳转的地址、search问号传参信息

App.jsx:搭建一级路由

import {
    HashRouter, Routes, Route, Navigate } from 'react-router-dom';
import HomeHead from './components/HomeHead';
/* 导入需要的组件 */
import A from './views/A';
import B from './views/B';
import C from './views/C';

const App = function App() {
   
    return <HashRouter>
        <HomeHead />
        <div className="content">
            <Routes>
                <Route path="/" element={
   <Navigate to="/a" />} />
                <Route path="/a" element={
   <A />} />
                <Route path="/b" element={
   <B />} />
                <Route path="/c" element={
   <C />} />
                {
   /* 如果以上都不匹配，我们可以渲染404组件，也可以重定向到A组件「传递不同的问号参数信息」 */}
                <Route path="*" element={
   <Navigate to={
   {
   
                    pathname: '/a',
                    search: '?from=404'
                }} />} />
            </Routes>
        </div>
    </HashRouter>;
};

搭建二级路由：v6版本中，要求所有的路由(二级或者多级路由)，不再分散到各个组件中编写，而是统一都写在一起进行处理

...
import A1 from './views/a/A1';
import A2 from './views/a/A2';
import A3 from './views/a/A3';
...
				<Route path="/a" element={
   <A />}>
                    <Route path="/a" element={
   <Navigate to="/a/a1" />} />
                    <Route path="/a/a1" element={
   <A1 />} />
                    <Route path="/a/a2" element={
   <A2 />} />
                    <Route path="/a/a3" element={
   <A3 />} />
                </Route>

A.jsx:Outlet路由容器，用来渲染二级(多级)路由匹配的内容(组件)

先跟一级路由进行匹配，一级路由匹配成功之后渲染并进入A组件，同时进行二级路由匹配，二级路由匹配成功之后将相关（二级）组件放到Outlet路由容器中进行渲染。

import {
    Link, Outlet } from 'react-router-dom';
...

const A = function A() {
   
    return <DemoBox>
        <div className="menu">
            <Link to="/a/a1">A1</Link>
            <Link to="/a/a2">A2</Link>
            <Link to="/a/a3">A3</Link>
        </div>
        <div className="view">
            {
   /* Outlet：路由容器，用来渲染二级(多级)路由匹配的内容 */}
            <Outlet /