React Router 6

一、安装 React Router

npm i react-router-dom@6.22.2

二、路由配置

1. 在 src 下新建一个 router 文件夹用来存放路由相关的内容，router 文件夹中新建一个 index.js。

2. 在 index.js 中进行路由配置：

   import { createBrowserRouter } from "react-router-dom";
   import Main from "../pages/main";
   import Home from "../pages/home";
   ​
   const routes = [
     {
       path: '/',
       Component: Main,
       children: [
         {
           path: 'home',
           Component: Home
         }
       ]
     }
   ]
   ​
   export default createBrowserRouter(routes)
   

3. home 是 main 的子路由，因此需要在 main.js 中设置子路由的出口（Outlet），类似于 Vue 的 router-view：

   import { Outlet } from "react-router-dom"
   const Main = () => {
     return (
       <div>
         Main
         <Outlet />
       </div>
     )
   }
   ​
   export default Main
   

4. 设置根路径路由重定向：

   import { createBrowserRouter, Navigate } from "react-router-dom";
   import Main from "../pages/main";
   import Home from "../pages/home";
   ​
   const routes = [
     {
       path: '/',
       Component: Main,
       children: [
         {
           path: '/',
           element: <Navigate to="home" replace/>
         },
         {
           path: 'home',
           Component: Home
         }
       ]
     }
   ]
   ​
   export default createBrowserRouter(routes)
   

5. 在入口文件 App.js 中引入 router：

   import { RouterProvider } from "react-router-dom";
   import router from "./router";
   ​
   function App() {
     return (
       <>
         <RouterProvider router={router}/>
       </>
     );
   }
   export default App;
   

三、路由跳转

使用 useNavigate 实现路由跳转

import { createBrowserRouter, Navigate } from "react-router-dom";
import Main from "../pages/main";
import Home from "../pages/home";
import User from "../pages/user";
​
const routes = [
  {
    path: '/',
    Component: Main,
    children: [
      {
        path: '/',
        element: <Navigate to="home" replace/>
      },
      {
        path: 'home',
        Component: Home
      },
      {
        path: 'user',
        Component: User
      }
    ]
  }
]
​
export default createBrowserRouter(routes)

import { useNavigate } from 'react-router-dom'; 
​
const Home = () => {
  let navigate = useNavigate();  
  const handleClick = () => {  
    // 导航到新路径  
    navigate('/user');  
    // 或者后退到历史堆栈中的上一个位置  
    // navigate(-1);  
    // 或者模拟点击浏览器后退按钮  
    // navigate('POP');  
  }; 
  return (
    <button onClick={handleClick}>Go to User</button> 
  )
}
​
export default Home

跳转时携带参数

跳转时携带参数有两种方式，一种是查询参数，一种是动态路由。

• 查询参数

  import { useNavigate } from 'react-router-dom'; 
  ​
  const Home = () => {
    let navigate = useNavigate();  
    const handleClick = () => {  
      navigate('/user?name=hayden');   
    }; 
    return (
      <button onClick={handleClick}>Go to User</button> 
    )
  }
  ​
  export default Home
  

• 动态路由

  import { createBrowserRouter, Navigate } from "react-router-dom";
  import Main from "../pages/main";
  import Home from "../pages/home";
  import User from "../pages/user";
  
  const routes = [
    {
      path: '/',
      Component: Main,
      children: [
        {
          path: '/',
          element: <Navigate to="home" replace/>
        },
        {
          path: 'home',
          Component: Home
        },
        {
          path: 'user/:userId',
          Component: User
        }
      ]
    }
  ]
  
  export default createBrowserRouter(routes)
  

  import { useNavigate } from 'react-router-dom'; 
  
  const Home = () => {
    let navigate = useNavigate();  
    
    const handleClick = () => {  
      const userId = 'aaa'
      navigate(`/user/${userId}`);  
    }; 
    return (
      <button onClick={handleClick}>Go to User</button> 
    )
  }
  
  export default Home
  

四、获取路由参数

跳转路由时携带参数的方式有两种，因此获取路由参数的方式也有两种：

• 获取查询参数中的参数：useSearchParams

  import { useSearchParams } from 'react-router-dom';  
  
  const User = () => {
    let [searchParams] = useSearchParams();  
    const userId = searchParams.get('userId');  
    return (
      <div>
        User{userId}
      </div>
    )
  }
  
  export default User
  

• 获取动态路由中的参数：useParams

  import { useParams  } from 'react-router-dom';  
  
  const User = () => {
    const { userId } = useParams();
    return (
      <div>
        User{userId}
      </div>
    )
  }
  
  export default User