Day09 React———— 第九天

ReactRoter

一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染

基础用法

import { createBrowserRouter, RouterProvider } from "react-router-dom";
const router = createBrowserRouter([
  { path: "/login", element: <div>我是login组件div> },
  { path: "/active", element: <div>我是active组件div> },
  {path:"/",element:<App/>}
]);
 
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  // 使用中间件链接 将store注入 react中
  <RouterProvider router={router}>
    <App />
  RouterProvider>
);

把router单独封装成一个文件

import { createBrowserRouter } from "react-router-dom";
import Login from "../page/Login";
import Active from "../page/Active";
 
const router = createBrowserRouter([
  {
    path: "/login",
    element: (
      <div>
        <Login />
      div>
    ),
  },
  { path: "/active", element: <div>
    <Active />
  div> },
]);
 
export default router;

路由导航跳转

声明式导航

声明式导航是指通过在模版中通过 组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行

   {/* 声明式导航 */}
      <Link to="/login">去login页Link>

路由式导航

编程式导航是指通过 useNavigate 钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活

{/* 编程式导航 */}
      
        onClick={() => {
          navigation("/active");
        }}
      >
        去active
      

获取参数

serchParams 传参

// app.js  
        onClick={() => {
          navigation("/active?id=88&name=liis");
        }}
      >
        serchParams 传参
      
 
 
// 目标组件
    const [parms] = useSearchParams();
    console.log(parms.get('id')); // 888

 params 传参

app.js
   
        onClick={() => {
          navigation("/active/8889/lool");
        }}
      >
        params 传参
      
 
 
//目标组件
    const parms = useParams();
    console.log(parms); // {id: '8889', name: 'lool'}

注意使用params传参时需要修改router路径

 {
    path: "/active/:id/:name",
    element: (
      <div>
        <Active />
      div>
    ),
  }

嵌套路由配置

在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由

// 路由配置
  {
    path: "/login",
    element: <Login />,
    children: [
      {
        index:true ,// 配置默认二级路由 
        element: <LoginA />,
      },
      {
        path: "b",
        element: <LoginB />,
      },
    ],
  },
 
 
//页面通过固定组件Outlet接收
 
 <div>
      my name is login
      <div>
        <Link to="a">go ALink>
        <Link to="b">go BLink>
        <Outlet/>
      div>
    div>

两种路由模式 

各个主流框架的路由常用的路由模式有俩种，history模式和hash模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建

useMemo

useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。

const cachedValue = useMemo(calculateValue, dependencies)