开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第40天，点击查看活动详情

写在前面

本篇是react学习的第八篇，认识React Router

认识React Router

React Router 提供客户端路由的功能。

在传统的网站中，浏览器从web服务器请求文档，下载css和js文件，并将从服务器发送的HTML呈现到浏览器页面上。当用户点击另一个链接时，浏览器会重新请求新页面。

而客户端路由通过点击链接时更新URL，不需要从服务器再次请求另一个文档。浏览器页面可以立即呈现一些新的UI，增强了用户体验，并可以使用ajax、axios、fetch等向服务器发出数据请求，达到在页面上展示最新数据的目的。

一些会用到的api介绍

createBrowserRouter

createBrowserRouter用来创建一个路由，用法如下：

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

const router = createBrowserRouter(routes);

routes为createBrowserRouter的参数，是一个含有children字段的可以嵌套的对象数组，例如：

[
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]

其中path表示路径；element表示要展示的内容（组件）；loader为加载器，在路由跳转之前调用，并通过useLoaderData为要展示的组件提供数据；此外还有errorElement表示错误页面；index表示索引；caseSensitive表示路由是否匹配大小写；action表单组件获取数据（<Form>），此外还有handle，后续接触到了再详细介绍

RouterProvider

用来展示createBrowserRouter创建的路由router的内容的组件

Outlet

父路由组件元素中使用<Outlet>来渲染其子路由组件

Link

<Link>是一个html元素，用户可以通过单击它进行路由导航，跳转到另一个路由，他会自动转换为a标签，不带active样式。用法如下：

<Link to={路由path}>路由名称</Link>

NavLink

同<Link>作用一样，但他在选择了菜单后会给选择菜单添加一个active类名，我们可以对选中的代码给不同的样式

useLoaderData

获取loader加载器向服务器请求的数据

Form

Form是一个组件，包含一个普通HTML表单，他有以下字段：

action：有两个字段。
1. params，动态路由的动态部分，例如:
path: "contacts/:contactId", // 这段传的params的值就是{contactId: 'contactId'}
2. request，这是一个发送到路由的Request实例。最常见是从中解析FormData，后续会有例子用到

methods：支持“get”、“post”、“put”、“patch”和“delete”。默认值为“get”。

redirect

可以重定向到另一个路由

useNavigation

useNavigation返回当前导航状态：可以是空闲、提交、加载之一

useNavigation().state === "loading" // 加载
useNavigation().state === "idle" // 空闲
useNavigation().state === "submitting" // 提交

写在最后

接下来在下一篇文章我们跟着React Router官方文档教程尝试使用React Router

以上就是认识React Router所有代码和说明

react入门8：认识React Router