路由：ReactRouter

概述

一个路径path对应一个组件component 当我们在浏览器中访问一个path的时候，path对应的组件会在页面中进行渲染。

使用

快速开始

安装依赖

java 复制代码

npm i react-router-dom

基本使用

java 复制代码

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: '/login',
    element: <div>登录页面</div>
  },
  {
    path: '/article',
    element: <div>文章页面</div>
  }
]);

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

路由抽离

在src目录下创建pages文件夹用来存放页面组件
在src目录下创建router文件夹用来存放路由
main.ts 注入router实例

router.jsx

必须是.jsx不是.js，.js里识别不了组件元素

java 复制代码

import { createBrowserRouter } from "react-router-dom";
import App from "../App.jsx";
import Login from "../pages/login.jsx";
import Article from "../pages/article.jsx";

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

export default router;

main.jsx

java 复制代码

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

import './index.css'
import store from './store'
import { Provider } from 'react-redux'
import { RouterProvider } from 'react-router-dom'
import router from './router/index'


createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </StrictMode>,
)

路由导航

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

声明式导航

声明式导航是指在模板中通过<Link /> 组件描述出要跳转到哪里去。通过给组件的to属性指定要跳转到的路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过字符串拼接的方式拼接参数

java 复制代码

import {Link} from "react-router-dom"
const Login = () => {
    return (
        <div>
            我是登录页面
            <Link to="/">返回首页</Link>
        </div>
    )
}

export default Login

编程式导航

编程式导航是指通过useNavigate钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，这种方式更加灵活

java 复制代码

import { useNavigate } from "react-router-dom"
const Login = () => {

    const navigate = useNavigate()

    return (
        <div>
            我是登录页面
            <button onClick={() => { navigate('/') }}>返回首页</button>
        </div>
    )
}

export default Login

路由传参

searchParams传参

java 复制代码

import { useNavigate } from "react-router-dom"
const Login = () => {

    const navigate = useNavigate()

    return (
        <div>
            我是登录页面
            <button onClick={() => { navigate('/article?id=123&name=tom') }}>打开文章</button>
        </div>
    )
}

export default Login

java 复制代码

import { useSearchParams } from "react-router-dom"
const Article = () => {

    const [searchParams] = useSearchParams()
    const id = searchParams.get('id')

    return (
        <div>
            我是文章页面，id是：{id}
        </div>
    )
}

export default Article

params传参

java 复制代码

import { useNavigate } from "react-router-dom"
const Login = () => {

    const navigate = useNavigate()

    return (
        <div>
            我是登录页面
            <button onClick={() => { navigate('/article/123/tom') }}>打开文章</button>
        </div>
    )
}

export default Login

java 复制代码

import { useParams } from "react-router-dom"
const Article = () => {

    const params = useParams()
    const id = params.id
    const name = params.name

    return (
        <div>
            我是文章页面，id是：{id}，name是：{name}
        </div>
    )
}

export default Article

java 复制代码

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

这种方式必须要在路由中添加相应的占位符才可以进行匹配

嵌套路由

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

java 复制代码

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: '/about',
        element: <About />
      }
    ]
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/article/:id/:name",
    element: <Article />,
  },
]);

java 复制代码

import { Outlet, Link } from 'react-router-dom'
import './App.css'
function App() {



  return (
    <div>
      主页
      <Link to="/about">关于</Link>
      {/* 二级路由出口 */}
      <Outlet />
    </div>
  );
}



export default App

默认二级路由配置

当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性为true

java 复制代码

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        index: true,
        element: <About />
      }
    ]
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/article/:id/:name",
    element: <Article />,
  },
]);

404 路由

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

java 复制代码

const router = createBrowserRouter([
  {
    path: "*",
    element: <NotFound />
  }
]);