前言

最近因为种种原因（公司需要），本博主捡起了以前本该学的却因为种种原因（自己懒）而荒废了的React技术栈。既然咱都学了React，那自然也需要和小伙伴们分享一下学习心得，今天我要分享的就是React路由的配置。

路由与项目版本

和Vue技术栈一样，React也是一个单页应用的框架，那我们自然就逃不脱一级路由，二级路由的配置。我先介绍一下我使用的React以及路由的版本。

在这个 demo 里，我使用的 React 版本是 18.2.0，使用的路由版本是 6.11.2，同时我这个deom 是 vite 搭建的。

一级路由的配置与编程式路由跳转

首先，我们先来介绍一下一级路由的配置，我们准备了两个组件：

        // About.jsx
        export default function About() {
          return (
            <div>This is About page</div>
          )
        }

     // Home.jsx
    import {useNavigate} from 'react-router-dom'
        export default function About() {
        const  navigate = useNavigate()  // 编程式路由跳转
           return (
             <div>This is Home page </div>
             <button onClick={() => {Navigate('/about')}}>跳转到about页面</button>
            )
         }

接下来，我们就需要在根组件App.jsx内配置这两个组件对应的路由：

import React from 'react';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

export default function App() {
  return (
    <div className='App'>
      <BrowserRouter>
          <Link to='/'>Home</Link>&nbsp;&nbsp;&nbsp;
          <Link to='/about'>About</Link>
          {/* 注册路由 */}
          <Routes>
            <Route path='/' element={<Home/>}></Route>
            <Route path='/about' element={<About/>}></Route>
          </Routes>
      </BrowserRouter>
    </div>
  )
}

路由配置

如上述代码，配置路由我们有如下几步：

1. 在 react-router-dom 引入 BrowserRouter 组件，嵌套在我们需要配置路由的组件外。
2. 在 react-router-dom 引入 Link 组件，配置路由导航，to表示我们要跳转的路径。
3. 在 react-router-dom 引入 Routes，Route 组件， 配置路由页面，Routes组件需要嵌套在Route外，path表示路由配置的路径，element表示该路由路径要展示的组件。

编程式路由跳转

在我们开发的需求中，我们不仅会使用到导航式路由跳转，还会使用编程式路由跳转。那编程式路由跳转我们就要借助的方法就是 useNavigate 这个 hooks函数，使用方法也就是上述 Home.jsx 的代码。

效果图如下：

路由传参与获取

在介绍完路由跳转后，我们就要另一个路由的重点--路由传参了

首先我们来介绍第一个路由传参与获取的方式：

useParams 函数

通过 react-router-dom 提供的 useParams 函数获取参数，

我们先将上述代码改造一下：

// About.jxs
import { useParams } from 'react-router-dom'
export default function About() {
    let params = useParams()
    let id = params.id
    console.log(id);
  return (
    <div>This is About page {id} </div>
  )
}

// Home.jsx
export default function Home() {
    const  navigate = useNavigate()
  return (
    <div>
        This is Home page
        <button onClick={() => {navigate('/about/1234', {replace:true})}}>跳转到about页面</button>
    </div>
  )
}

export default function App() {
  return (
    <div className='App'>
      <BrowserRouter>
          <Link to='/'>Home</Link>&nbsp;&nbsp;&nbsp;
          <Link to='/about/1002'>About</Link>
          {/* 注册路由 */}
          <Routes>
            <Route path='/' element={<Home/>}></Route>
            <Route path='/about/:id' element={<About/>}></Route>
          </Routes>
      </BrowserRouter>
    </div>
  )
}

如上述代码: 我们在about路径下使用斜杆拼接了一个参数， 我们在 About 组件上使用 useParams 函数即可获取到url所带的参数。

效果图如下：

useSearchParams 函数

这第二种路由传参的方式就是使用 useSearchParas 函数，它与 useParams 之处如下：

    // About.jxs
   import { useSearchParams, useParams} from 'react-router-dom'
   export default function About() {
       let [params] = useSearchParams()
       console.log(params.get('id'));
     return (
       <div>This is About page <br />
       上个页面携带的参数为：{id}
       </div>
     )
   }

      // Home.jsx
        export default function Home() {
            const  navigate = useNavigate()
          return (
            <div>
                This is Home page
                <button onClick={() => {navigate('/about?id=1234', {replace:true})}}>跳转到about页面</button>
            </div>
          )
        }

        export default function App() {
          return (
            <div className='App'>
              <BrowserRouter>
                  <Link to='/'>Home</Link>&nbsp;&nbsp;&nbsp;
                  <Link to='/about?id=1002'>About</Link>
                  {/* 注册路由 */}
                  <Routes>
                    <Route path='/' element={<Home/>}></Route>
                    <Route path='/about' element={<About/>}></Route>
                  </Routes>

              </BrowserRouter>
            </div>
          )
        }

如上述代码，我们可以看出在About组件上使用 useSearchParams 需要先解构出 params，再调用get方法获取某个 参数。

效果如下图:

结语

写到这里，我也就和大家介绍完了一级路由的配置与路由参数的传递与获取，学习阶段，也欢迎小伙伴们指导。