这还是我们认识的react-router吗？

捕获路由出错

比如当某个路由下发生错误的时候，可以捕获路由错误 可以捕获路由错误，通过errorElement获取捕获错误 比如 可以使用useRouteError获取到发生的错误

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

export default function ErrorPage() {
  const error = useRouteError();
  console.error(error);

  return (
    <div id="error-page">
      <h1>Oops!</h1>
      <p>Sorry, an unexpected error has occurred.</p>
      <p>
        <i>{error.statusText || error.message}</i>
      </p>
    </div>
  );
}

路由出错也会有冒泡性，也就是如果在子路由出错，如果子路由没有设置errorElement，就会冒泡到父路由上。

如何设置路由渲染到指定的区域

可以使用react-router-dom 提供的Outlet

// import React from "react";
import { Outlet } from "react-router-dom";

<div id="detail">
  <Outlet />
</div>

然后配置路由如下：

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root/>,
    errorElement: <ErrorPage />,
    children: [
      {
        // 这里的路由就会渲染到Outlet里边
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
  },
]);

切换路由的时候，加载数据

使用loader和useLoaderData 这两个api来实现

使用loader 加载数据；

使用useLoaderData在组件中获取到加载过来的数据；

但是感觉这个没什么实际落地场景

然后再结合action，同步loader里边的数据。

感觉没什么用处，不是使用redux 管理状态吗？ 怎么react-router-dom这里也要插一脚，完全没搞懂😭

获取路由url的参数

[
  {
    path: "contacts/:contactId",
    element: <Contact />,
  },
];

比如像这里的:contactId，在loader里边获取的方式就是通过使用

export async function loader({ params }) {
  return getContact(params.contactId);
}

这里可以看到contactId直接通过params穿到了loader函数里边

使用NavLink来展示当前所在的路由

使用NavLink可以获取当前路由是否是active的，比如如下代码,通过传入的isActive和isPending判断当前是否是active的状态

<NavLink
  to={`contacts/${contact.id}`}
  className={({ isActive, isPending }) =>
    isActive ? "active" : isPending ? "pending" : ""
  }
>

路由跳转添加loading 效果

可以使用useNavigation，获取到当前的路由状态，是否是loading状态，比如 在Outlet外边添加loading状态

const navigation = useNavigation();

 <div
        id="detail"
        className={
          navigation.state === "loading" ? "loading" : ""
        }
      >
        <Outlet />
      </div>

本文由 mdnice 多平台发布