react-router-dom 快速上手

一、概念

路由和组件的对应关系，使页面在同一个 html 快速切换。

二、快速开始

createBrowserRouter 创建路由实例

RouterProvider 组件渲染

// route.tsximport { createBrowserRouter } from 'react-router-dom';import Home from "./views/Home"import Login from "./views/Login"const router = createBrowserRouter({path: "/",element: <Home />,},{path: '/login'，element: <Login />});export default router;

// main.tsximport React from "react";import ReactDOM from "react-dom/client";import { RouterProvider } from "react-router-dom";import router from "./router";ReactDom.createRoot(document.getElementById("root")).render(<React.StrictMode><RouterProvider router={router} /></React.StrictMode>);

三、路由模式

history 模式：createBrowserRouter

hash 模式：createHashRouter

四、路由跳转

import { useNavigate } from "react-router-dom";const navigate = useNavigate();navigate("/home", { replace: true });

五、路由传参

1. searchParams 方式

// 设置navigate("/home?id=1");// 获取import { useSearchParams } from "react-router-dom";const [params] = useSearchParams();params.get("id");

// 多个参数navigate("/home?id=1&name=yq");

2. params 方式

// 设置router = {path: "/home/:id",};navigate("/home/1");// 获取import { useParams } from "react-router-dom";const { id } = useParams();

六、嵌套路由

const router = createBrowserRouter([{path: "/",element: <Layout></Layout>,children: [{path: "/user",element: <User></User>,},],},]);

export default (<div><Outlet></Outlet></div>);

七、默认二级路由

createBrowserRouter([{path: "/",element: <Layout></Layout>,children: [{index: true,element: <User></User>,},],},]);

八、404 路由

createBrowserRouter([{path: "*",elemetn: <NotFound></NotFound>,},]);