雖然react-router v6的官方文檔洋洋灑灑萬字有余，但實(shí)際上開發(fā)中常用的也就那么幾個(gè)，掌握本文所述內(nèi)容應(yīng)對(duì)開發(fā)就足夠了，接下來就跟著筆者一起來梳理一下吧

安裝

yarn add react-router

初始化

• 創(chuàng)建路由表

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

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

export default router;

• 全局注入

在main.ts中引入路由表并注冊(cè)

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

語法與實(shí)踐

• 嵌套路由

1.定義路由表

嵌套路由通過children屬性實(shí)現(xiàn)，它是一個(gè)數(shù)組，數(shù)組的每一項(xiàng)都是一個(gè)獨(dú)立的路由配置

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.設(shè)置路由出口

找到嵌套根路由，設(shè)置路由出口

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

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

export default Nested;

3.預(yù)覽

嵌套路由.gif

• 動(dòng)態(tài)路由

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

1.定義路由表

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

2.定義動(dòng)態(tài)路由

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

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

function Dy() {
  const params = useParams()
  return <>動(dòng)態(tài)路由：{params.id}</>;
}

export default Dy;

3.預(yù)覽

image.png

• 路由重定向

業(yè)務(wù)中使用重定向的一般指的就是在/時(shí)，要跳轉(zhuǎn)到默認(rèn)的預(yù)定路由，這可以通過loader+redirect實(shí)現(xiàn)

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.預(yù)覽

重定向.gif

• 路由導(dǎo)航與參數(shù)傳遞

使用useNavigate鉤子導(dǎo)航路由，使用useParams、useLocation或useSearchParams獲取導(dǎo)航攜帶的參數(shù)

1.導(dǎo)航

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

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

export default Nested;

2.獲取參數(shù)

useParams鉤子用來獲取動(dòng)態(tài)路由的參數(shù)

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

useSearchParams用于獲取url中的查詢參數(shù)，即?后的部分

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

useLocation用于獲取state傳參

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

源碼

react-blob下的react-router分支