react-router基本写法

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;