1. 創建項目并安裝所有依賴?

npx create-react-app react-router-pro
npm i

2. 安裝所有的 react router 包

npm i react-router-dom

3. 啟動項目

npm run start

router/index.js

// 創建路由實例 綁定path elementimport Layout from "@/pages/Layout";
import Month from "@/pages/Month";
import New from "@/pages/New";
import Year from "@/pages/Year";
import { createBrowserRouter } from "react-router-dom";const router = createBrowserRouter([{path: "/",element: <Layout />,children: [{index: true,element: <Month />,},{ path: "Year", element: <Year /> },],},{path: "/new",element: <New />,},
]);export default router;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { RouterProvider } from "react-router-dom";
import router from "./router";
import { Provider } from "react-redux";
import store from "./store";// 導入定制主題
import "./theme.css";const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Provider store={store}><RouterProvider router={router} /></Provider>
);

1. 聲明式導航

import { Link } from "react-router-dom";<Link to="/article">文章</Link>

2. 編程式導航

const { useNavigate } = require("react-router-dom");export const Login = () => {const navigate = useNavigate();return (<div>我是登錄頁<button onClick={() => navigate("/article")}>跳轉至文章</button></div>);
};

3. 路由導航傳參

(1) searchParams 傳參

page/Login/index.js

const { useNavigate } = require("react-router-dom");export const Login = () => {const navigate = useNavigate();return (<div>我是登錄頁<button onClick={() => navigate("/article?id=1001&name=jack")}>跳轉至文章</button></div>);
};

page/Article/index.js

const { useSearchParams } = require("react-router-dom");const [params] = useSearchParams()
const id = params.get('id')
const name = params.get('name')

(2) params 傳參

?page/Login/index.js

const { useNavigate } = require("react-router-dom");export const Login = () => {const navigate = useNavigate();return (<div>我是登錄頁<button onClick={() => navigate("/article/1001/jack")}>跳轉至文章</button></div>);
};

page/Article/index.js?

const { useParams } = require("react-router-dom");const params = useParams()
const id = params.id
const name = params.name

別忘在 router 里加占位符

  {path: "/article/:id/:name",element: <Article />,},

4. 嵌套路由配置

import { createBrowserRouter } from "react-router-dom";const router = createBrowserRouter([{path: "/",element: <Layout />,children: [{path: 'board',element: <Board />,},{path: "about",element: <About />,},],},
]);export default router;

const Layout = () => {return (<div>  <div>我是Layout</div><Link to="/board">面板</Link><Link to="/about">關于</Link>{/* 二級路由出口 */}<Outlet /></div>);
};export default Layout;

5. 默認二級路由配置

只需要在二級路由的位置去掉 path，設置 index 屬性為 true

import { createBrowserRouter } from "react-router-dom";const router = createBrowserRouter([{path: "/",element: <Layout />,children: [// 設置為默認二級路由，一級路由訪問的時候，它也能得到渲染{index: true,element: <Board />,},{path: "about",element: <About />,},],},
]);export default router;

const Layout = () => {return (<div>  <div>我是Layout</div><Link to="/">面板</Link><Link to="/about">關于</Link>{/* 二級路由出口 */}<Outlet /></div>);
};export default Layout;

?6. 404 路由配置

      {path: "*",element: <NotFound />,},

const NotFound = () => {// 自定義模版return (<div> this is NotFound </div>);
};export default NotFound;

7. 兩種路由模式

（1）history 模式

（2）hash 模式?

?不需要后端配合

import { createHashRouter } from "react-router-dom";const router = createHashRouter([{path: "/",element: <Layout />,children: [// 設置為默認二級路由，一級路由訪問的時候，它也能得到渲染{index: true,element: <Board />,},{path: "about",element: <About />,},],},
]);export default router;