十三、【react】react-router 路由-优快云博客

一、快速开始

参考代码：https://gitee.com/qin_jingtao/react-router-demo.git

引入依赖

npm i  react-router-dom

创建两个组件

function Article() {
    return <div>Article</div>
}
export default Article;

function Login() {
    return <div>Login</div>
}
export default Login;

创建router模块

import Login from "../page/Login"
import Article from "../page/Article"

import { createBrowserRouter } from "react-router-dom"

const router = createBrowserRouter([
    {
        path: "/login",
        element: <Login/>
    },
    {
        path: "/article",
        element: <Article/>
    }
])

export default router

main.tsx导入router

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'

// 导入router相关内容
import { RouterProvider } from 'react-router-dom'
import router from './router'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
  	// 关联router
    <RouterProvider router={router}> 
    </RouterProvider>
  </StrictMode>,
)

二、路由导航

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信

1、声明式导航

声明式导航是指通过在模版中通过 <Link/> 组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行

import { Link } from "react-router-dom";

<Link to={"/article"}>跳转到目标页面</Link>

语法说明：通过给组件的to属性指定要跳转到路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过字符串拼接的方式拼接参数即可

2、编程式导航

编程式导航是指通过 useNavigate 钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活

// 引入
import { useNavigate } from "react-router-dom";

function Article() {
    const navigate = useNavigate()
    return (
        <div>
            Article
            // 点击的时候调用一下
            <button onClick={() => navigate('/login')}>去登陆</button>
        </div>
    )
}
export default Article;

语法说明：通过调用navigate方法传入地址path实现跳转

三、路由导航传参

1、searchParams 传参

<button onClick={() => navigate('/login?id=123&name=admin')}>去登陆</button>

import { Link, useSearchParams } from "react-router-dom";

function Login() {
    const [params] = useSearchParams()
    let id = params.get("id")
    let name = params.get("name")
    return (
        <div>
            Login
            <Link to={"/article"}>跳转到文章{id}:{name}</Link>
        </div>
    )
}
export default Login;

2、params传参

路由中添加参数

const router = createBrowserRouter([
    {
        path: "/login/:id",
        element: <Login/>
    }
])

传递

<button onClick={() => navigate('/login/1001')}>Param方式</button>

接收

import { Link, useParams} from "react-router-dom";

function Login() {
    const params2 = useParams()
    return (
        <div>
            <h1>{params2.id}</h1>
        </div>
    )
}
export default Login;

四、嵌套路由

在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由，例如：
在这里插入图片描述
实现步骤：

使用children属性配置路由嵌套关系
使用 <Outlet/> 组件配置二级路由渲染位置

const router = createBrowserRouter([
    {
        path: "/layout",
        element: <Layout/>,
        children:[
            {
                path: "board",
                element: <Board/>,
            },
            {
                path: "about",
                element: <About/>,
            }
        ]
    }
])

import { Link, Outlet } from "react-router-dom";
function Layout() {
    return (
        <div>
            <h1>layout</h1>
            <h1><Link to={"/layout/board"}>面板</Link></h1>
            <h1><Link to={"/layout/about"}>关于</Link></h1>
            {/* 二级路由出口 */}
            <Outlet/>
        </div>
    )
}
export default Layout;

面板和关于的组件非常简单，不再赘述
设置默认二级路由
把router中的path去掉，换成index:true
之前用的路径也要修改

{
    // path: "board",
    index: true,
    element: <Board/>,
},

五、404路由

场景：当浏览器输入url的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染

实现步骤：

准备一个NotFound组件
在路由表数组的末尾，以*号作为路由path配置路由

{
    path: "*",
    element: <NotFound/>
}

六、俩种路由模式

各个主流框架的路由常用的路由模式有俩种，history模式和hash模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建

路由模式	url表现	底层原理	是否需要后端支持
history	url/login	history对象 + pushState事件	需要
hash	url/#/login	监听 hashChange事件	不需要