React18从入门到实战-day2

导言

本文主要内容来源黑马的React18入门到实战视频教程，主要是为了复习自己已经遗忘的基础知识。

ReactRouter

前端路由

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

 const router = [
    {
      path: "/about",
      component: About,
    },
    {
      path: "/article",
      component: Article,
    },
  ];

抽象路由

路由导航跳转

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信。

声明式路由

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

<Link to="/article">文章</Link>

语法说明： 通过给组件的to属性指定要跳转到路由path，组件会渲染为浏览器支持的a链接，如果需要传参直接 通过字符串拼接的方式拼接参数即可。

编程式导航

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

<div>

<button onClick={()=>navigate('/article')}>
跳转至文章
</button>

</div>

语法说明： 通过调用navigate方法传入地址path实现跳转。

嵌套路由配置

在一级路由中又嵌套了其他路由，这种关系就叫嵌套路由，嵌套至一级路由内的路由又称作二级路由。 实现步骤：

     ①  使用 children 属性配置路由嵌套关系

     ② 使用 '' 组件配置二级路由渲染位置

默认二级路由配置

当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性值为true。