react-router-dom 快速上手
一、概念
路由和组件的对应关系，使页面在同一个 html 快速切换。
二、快速开始
createBrowserRouter 创建路由实例
RouterProvider 组件渲染
// route.tsx
import { 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.tsx
import 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>,
},
]);