react 路由

安装

npm install react-router-dom

index.js引入 router

import React from "react";
import ReactDOM from "react-dom/client";

// 导入 RouterProvider 和 createBrowserRouter 
import { RouterProvider, createHashRouter } from "react-router-dom";
// 导入路由配置
import router from "./router.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    {/* 注入路由  */}
    <RouterProvider router={createHashRouter (router)} />
  </React.StrictMode>
);

两种路由方式

1.声明式导航

import { Link } from "react-router-dom";

export default function Index() {
  return (
    <div>
      <h1>首页</h1>
      <Link to="/login">登录</Link>
    </div>
  );
}

2.编程式导航

import { useNavigate } from "react-router-dom";

export default function Login() {
  const navigate = useNavigate();
  return (
    <>
      <h1>登录页</h1>
      <button onClick={() => navigate("/")}>登录</button>
    </>
  );
}

传参方式

1.searchParams

//传参
<button onClick={() => navigate("/login?id=66")}>

//接参数
import { useSearchParams } from "react-router-dom";


const [params] = useSearchParams();
const name = params.get("id") || "";

parmas

//需要路由配置占位符
  { 
    // 可配置多个，如 "/member/:id/:name",
    path: "/login/:id",
    element: <Login />,
  },

//传参

<Link to="/login/1">登录</Link>

//接参数
import { useParams } from "react-router-dom";


const params = useParams();
const id = params.id;

嵌套路由

//路由配置
  {
    path: "/",
    element: <Index />,
    children: [
      {
        // 默认二级嵌套路由
        index: true,
        element: <IndexDetail />,
      },
      {
        path: "about",
        element: <About />,
      },
      {
        path: "userInfo",
        element: <UserInfo />,
      },
    ],
  },
  
  //Outlet 配置到哪里，二级路由渲染在哪里
import { Link, Outlet } from "react-router-dom";

export default function Index() {
  return (
    <div>
      <h1>layout</h1>
      <div>
        <Link to="/">首页详情</Link>
      </div>

      <div>
        <Link to="/about">网站详情</Link>
      </div>
      <div>
        <Link to="/userInfo">用户信息</Link>
      </div>

      <div>
        {/* 在此处渲染子路由页面 */}
        <Outlet />
      </div>
    </div>
  );
}

获取当前路由

import { useLocation } from "react-router-dom"

function Login (){

   const location= useLocation()

    return <div>获取当前路由 {location.pathname }</div>
}

export default  Login

createBrowserRouter 创建之后，会在默认导出 router实例

   router.navigate("/new").then(()=>{
    window.location.reload()
   })

路由懒加载

lazy：动态导入路由 Suspense： 包裹组件，Suspense的fallback 路径被加载前的占位符，

import { createHashRouter } from "react-router-dom"
import{ lazy , Suspense } from "react"

const Login=lazy(()=>import("@/pages/Login/index.js"))


const router=createHashRouter([
      {
        path:"/login",
        element:<Suspense fallback={'loading'}> <Login/></Suspense>
    },
    
])

export default router