1.路由基本使用

1.1 项目环境准备

代码如下（示例）：

# 创建react项目
$ yarn create vite react-router --template react

# 安装所有依赖包
$ yarn

# 启动项目
$ yarn dev

# 安装react-router包
$ yarn add react-router-dom@6

1.2 基础使用

在这里插入图片描述

代码如下（示例）：

// 引入必要的内置组件
import {
    
     BrowserRouter, Routes, Route, Link } from 'react-router-dom'

// 准备俩个路由组件

const Home = () => <div>this is home</div>
const About = () => <div>this is about</div>

function App() {
    
    
  return (
    <div className="App">
      {
    
    /* 按照规则配置路由 */}
      <BrowserRouter>
       //Link to为声明式跳转
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Routes>
          <Route path="/" element={
    
    <Home />}></Route>
          <Route path="/about" element={
    
    <About />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

2. 路由跳转

2.1 编程式导航

概念: 通过js编程的方式进行路由页面跳转，比如说从首页跳转到关于页。
实现步骤：
1.导入一个 useNavigate 钩子函数
2.执行 useNavigate 函数得到跳转函数
3.在事件中执行跳转函数完成路由跳转
如从Home页跳转到About页：（'/about’路径正确即可）

// 导入useNavigate函数
import {
    
     useNavigate } from 'react-router-dom'
const Home = () => {
    
    
  // 执行函数
  const navigate = useNavigate()
  return (
    <div>
      Home
      <button onClick={
    
     ()=> navigate('/about') }> 跳转关于页 </button>//路由跳转，无参
    </div>
  )
}

export default Home

注: 如果在跳转时不想添加历史记录，可以添加额外参数replace 为true

navigate('/about', {
    
     replace: true } )

2.2 跳转传参

两种方式：
1）searchParams传参
在路由传参时，加上参数

 navigate('/about?=1001&name=cp')

在路由取参时，使用useSearchParams来get

let [params] = useSearchParams()
//params是一个对象
let id = params.get('id')
let name = params.get('name')

2） params传参
在路由传参时，加上参数

navigate('/about/1001')

在传参前需修改路由路径

<Route path="/about/:id" element={
    
    <About />}></Route>

在路由取参时，使用useParams直接获取

let [params] = useParams()
//params是一个对象
let id = params.id

3. 嵌套路由

在这里插入图片描述
1.先构建两个一级路由
Layout.js

扫描二维码关注公众号，回复： 15874194 查看本文章

function Layout(){
    
    
   return (
     <div>
      layout
     </div>
  )
}

export default Layout

function Login(){
    
    
   return (
     <div>
       login
     </div>
  )
}

export default Login

在App.js中引入

import {
    
    BrowserRouter,Routes,route} from 'react-router-dom'
import Layout from './Layout'
import Login from './Login'

function App(){
    
    
  return (
    <BrowserRouter>
      <Routes>
         <Route path='/' element={
    
    <Layout />}></Route>
         <Route path='/login' element={
    
    <Login />}></Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App

再构建两个二级路由
Board.js

function Board(){
    
    
   return (
     <div>
       board
     </div>
  )
}

export default Board

Article.js

function Article(){
    
    
   return (
     <div>
       article
     </div>
  )
}

export default Article

一级和二级路由文件都创建完了，此时需要完成嵌套，分两步走：
1）在App.js中定义嵌套路由声明

<Routes>
  <Route path="/"  element={
    
    <Layout/>}>
    //定义二级路由嵌套
    <Route path="board" element={
    
     <Board/> } />
    <Route path="article" element={
    
     <Article/> } />
  </Route>
  <Route path='/login' element={
    
    <Login />}></Route>
</Routes>

2）在一级路由中使用指定二级路由出口
在Layout.js中

import {
    
    Outlet} from 'react-router-dom'
function Layout(){
    
    
   return (
     <div>
      layout
      {
    
     /* 二级路由的path等于 一级path + 二级path  */ }
      <Link to="/board">board</Link>
      <Link to="/article">article</Link>
      //二级路由出口,也就是在Layout后
      <Outlet />
     </div>
  )
}

export default Layout

如果需要设置页面默认路由显示，只需要在App.js中把此路由的path去掉，替换成index（首页）。在一级路由中对应二级路由路径设为空即可。
在App.js中

<Routes>
  <Route path="/"  element={
    
    <Layout/>}>
    <Route index element={
    
     <Board/> } />
    <Route path="article" element={
    
     <Article/> } />
  </Route>
</Routes>

在Layout.js中

import {
    
     Outlet } from 'react-router-dom'

const Layout = () => {
    
    
  return (
    <div>
      layout
      {
    
     /* 默认二级不再具有自己的路径  */ }
      <Link to="/">board</Link>
      <Link to="/article">article</Link>
      {
    
     /* 二级路由出口 */ }
      <Outlet/>
    </div>
  )
}

4. 404路由配置

1.准备一个NotFound组件

const NotFound = () => {
    
    
  return <div>this Page is NotFound</div>
}

export default NotFound

在App.js中

<BrowserRouter>
  <Routes>
    <Route path="/" element={
    
    <Layout />}>
      <Route index element={
    
    <Board />} />
      <Route path="article" element={
    
    <Article />} />
    </Route>
    <Route path='/login' element={
    
    <Login />}></Route>
    //当所有路径都没有匹配到时，兜底匹配
    <Route path="*" element={
    
    <NotFound />}></Route>
  </Routes>
</BrowserRouter>

5. 集中式路由配置

场景: 当我们需要路由权限控制点时候, 对路由数组做一些权限的筛选过滤，所谓的集中式路由配置就是用一个数组统一把所有的路由对应关系写好替换本来的Roues组件。

import {
    
     BrowserRouter, Routes, Route, useRoutes } from 'react-router-dom'

import Layout from './pages/Layout'
import Board from './pages/Board'
import Article from './pages/Article'
import NotFound from './pages/NotFound'

// 1. 准备一个路由数组 数组中定义所有的路由对应关系
const routesList = [
  {
    
    
    path: '/',
    element: <Layout />,
    children: [
      {
    
    
        element: <Board />,
        index: true, // index设置为true 变成默认的二级路由
      },
      {
    
    
        path: 'article',
        element: <Article />,
      },
    ],
  },
  // 增加n个路由对应关系
  {
    
    
    path: '*',
    element: <NotFound />,
  },
]

// 2. 使用useRoutes方法传入routesList生成Routes组件
function WrapperRoutes() {
    
    
  let element = useRoutes(routesList)
  return element
}

function App() {
    
    
  return (
    <div className="App">
      <BrowserRouter>
        {
    
    /* 3. 替换之前的Routes组件 */}
        <WrapperRoutes />
      </BrowserRouter>
    </div>
  )
}

export default App

React-Route路由的基本使用、编程式导航路由跳转、嵌套路由和集中式路由配置