雖然react-router v6的官方文檔洋洋灑灑萬字有餘，但實際上開發中常用的也就那麼幾個，掌握本文所述內容應對開發就足夠了，接下來就跟着筆者一起來梳理一下吧

安裝

yarn add react-router

初始化

• 創建路由表

在根目錄下新建router.ts文件夾，並新建index.ts文件

import { createHashRouter } from "react-router-dom";
// 具體的路由頁面
import User from "../pages/user";
// 創建hash路由
const router = createHashRouter([
  {
    path: "/",
  },
  {
    path: "/user",
    Component: User,
  },
]);

export default router;

• 全局注入

在main.ts中引入路由表並註冊

...
import ReactDOM from "react-dom/client";
...
import store from "./store";
import { Provider } from "react-redux";
...
ReactDOM.createRoot(...).render(
  ...
    <Provider store={store}>
      ...
    </Provider>
  ...
);

語法與實踐

• 嵌套路由

1.定義路由表

嵌套路由通過children屬性實現，它是一個數組，數組的每一項都是一個獨立的路由配置

import { createHashRouter } from "react-router-dom";
...
import Nested from "../pages/router/index";
import NestedA from "../pages/router/a";
import NestedB from "../pages/router/b";

const router = createHashRouter([
  ...,
  {
    path: "/nested",
    // 嵌套根路由
    Component: Nested,
    children: [
      {
        // 嵌套的子路由
        path: "/nested/a",
        Component: NestedA,
      },
      {
        path: "/nested/b",
        Component: NestedB,
      },
    ],
  },
]);

export default router;

2.設置路由出口

找到嵌套根路由，設置路由出口

// src/pages/nested/index.tsx
import { Outlet } from "react-router-dom";

function Nested() {
  return <>嵌套路由 <br/>
    <Outlet/>
  </>;
}

export default Nested;

3.預覽

• 動態路由

提供:xxx作為佔位符，xxx可以任意的路徑片段

1.定義路由表

import Dy from '../pages/router/dy';
const router = createHashRouter([
  ...,
  {
    path:'/dy/:id',
    Component:Dy
  }
]);

2.定義動態路由

:xxx部分可以通過useParams鈎子獲取

// src/pages/router/dy.tsx
import { useParams } from 'react-router-dom';

function Dy() {
  const params = useParams()
  return <>動態路由：{params.id}</>;
}

export default Dy;

3.預覽

• 路由重定向

業務中使用重定向的一般指的就是在/時，要跳轉到默認的預定路由，這可以通過loader+redirect實現

1.定義路由表

import { createHashRouter,redirect } from "react-router-dom";
...
import Redirect from '../pages/router/redirect';

const router = createHashRouter([
  {
    path: "/",
    loader:()=>{
      throw redirect("/redirect")
    }
  },
  ...,
  {
    path:'/redirect',
    Component:Redirect
  }
]);

export default router;

2.預覽

• 路由導航與參數傳遞

使用useNavigate鈎子導航路由，使用useParams、useLocation或useSearchParams獲取導航攜帶的參數

1.導航

...
import { Button } from "antd";
import { useNavigate } from "react-router-dom";

function Nested() {
  const navigate = useNavigate();
  const handleRouterChange = () => {
    // 執行路由跳轉
    navigate('/push?id=1',{
      state:99
    })
  };
  return (
    <>
      ...
      <Button type="primary" onClick={handleRouterChange}>
        跳轉
      </Button>
    </>
  );
}

export default Nested;

2.獲取參數

useParams鈎子用來獲取動態路由的參數

// src/pages/router/dy.tsx
import { useParams } from "react-router-dom";
const params = useParams()
// xxx即定義的動態路由名稱
params.xxx

useSearchParams用於獲取url中的查詢參數，即?後的部分

// src/pages/router/push.tsx
import { useSearchParams } from "react-router-dom";
const [searchParams] = useSearchParams();
// xxx即查詢參數的某一個key
searchParams.get('xxx')

useLocation用於獲取state傳參

// src/pages/router/push.tsx
import { useLocation } from "react-router-dom";
const { state } = useLocation();

源碼

react-blob下的react-router分支