React Router的使用

React Router 是 React 项目的路由库，使用很方便，也是 React 前端项目的主要功能库之一。这里的路由指的是客户端的路由，在客户端路由时，浏览器是不会发送页面请求的，只会发送数据请求。

安装依赖

复制代码

npm install react-router-dom localforage match-sorter sort-by

主要组件

首先创建一个 Router，这里创建的是 BrowserRouter，还有其他类型的 Router，Browser 和 Hash 是使用比较广泛的 Router。

复制代码

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

初始化

复制代码

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

在没有路由的时候，这里放的是入口组件，有了路由，就由路由进行管理了，如上所示，目前进入应用后显示的就是 Hello World。

path： 是 url 中地址
element： 是React 组件

错误处理

在项目中添加错误处理组件，组件出现任何异常时进行显示。

复制代码

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
  },
]);

嵌套路由

嵌套路由是指在页面中的某一部分显示内容，而不是覆盖整个根元素。这里 children 就是嵌套的元素，Root 页面是一个左右结构的页面，左侧显示导航区，右侧显示内容区。

复制代码

{
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
 },

嵌套路由中可以设置默认路由，这样避免了初始化是白屏，没有数据的情况。

复制代码

  children: [
      { index: true, element: <Index /> },
      /* existing routes */
    ],

只有配置还不行，还需要在页面中指定显示在什么位置，Outlet 就是子路由组件显示的位置。

复制代码

<>
     {/* all the other elements */}
     <div id="detail">
       <Outlet />
     </div>
</>

链接

对于客户端路由来说，页面中不能再出现 <a href... 这会导致服务器渲染。在 React Router 中需要用 Link 进行替换。

复制代码

<Link to={`contacts/1`}>Your Name</Link>

NavLink

NavLink 和 Link 不同之处就是 NavLink 内部有一个状态记录是否处于点击状态。

复制代码

<NavLink
 to="/messages"
 className={({ isActive, isPending, isTransitioning }) =>
   [
     isPending ? "pending" : "",
     isActive ? "active" : "",
     isTransitioning ? "transitioning" : "",
   ].join(" ")
 }
>

useNavigate

useNavigate钩子函数可以进行路由跳转，例如跳转到历史的上一页，useNavigate(-1)

复制代码

const navigate = useNavigate();

  return (
    <Form method="post" id="contact-form">
      {/* existing code */}

      <p>
        <button type="submit">Save</button>
        <button
          type="button"
          onClick={() => {
            navigate(-1);
          }}
        >
          Cancel
        </button>
      </p>
    </Form>

dataRouter

ReactRouter v6 中提供 DataRouter 的功能，例如 loader，action，useNavigation 等，这样路由就监控了数据增、删、改、查的状态，通过这种控制可以在客户端添加处理，比如数据是不是获取中还没有返回，这样前端就可以进行对应的处理，例如添加等待动画。

ReactRouter 使用起来比较简单，做路由管理、跳转等等。