Day09 React———— 第九天

ReactRoter

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

基础用法

javascript 复制代码
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单独封装成一个文件

javascript 复制代码
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/> 组件描述出要跳转到哪里去,比如后台管理系统的左侧菜单通常使用这种方式进行

javascript 复制代码
   {/* 声明式导航 */}
      <Link to="/login">去login页</Link>

路由式导航

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

javascript 复制代码
{/* 编程式导航 */}
      <button
        onClick={() => {
          navigation("/active");
        }}
      >
        去active
      </button>

获取参数

serchParams 传参

javascript 复制代码
// app.js  
<button
        onClick={() => {
          navigation("/active?id=88&name=liis");
        }}
      >
        serchParams 传参
      </button>


// 目标组件
    const [parms] = useSearchParams();
    console.log(parms.get('id')); // 888

params 传参

javascript 复制代码
app.js
   <button
        onClick={() => {
          navigation("/active/8889/lool");
        }}
      >
        params 传参
      </button>


//目标组件
    const parms = useParams();
    console.log(parms); // {id: '8889', name: 'lool'}

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

javascript 复制代码
 {
    path: "/active/:id/:name",
    element: (
      <div>
        <Active />
      </div>
    ),
  }

嵌套路由配置

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

javascript 复制代码
// 路由配置
  {
    path: "/login",
    element: <Login />,
    children: [
      {
        index:true ,// 配置默认二级路由 
        element: <LoginA />,
      },
      {
        path: "b",
        element: <LoginB />,
      },
    ],
  },


//页面通过固定组件Outlet接收

 <div>
      my name is login
      <div>
        <Link to="a">go A</Link>
        <Link to="b">go B</Link>
        <Outlet/>
      </div>
    </div>

两种路由模式

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

路由模式 url表现 底层原理 是否需要后端支持
history url/login history对象 + pushState事件 需要
hash url/#/login 监听hashChange事件 不需要

useMemo

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

javascript 复制代码
const cachedValue = useMemo(calculateValue, dependencies)
相关推荐
虾球xz16 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇22 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒25 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员41 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐43 分钟前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express