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

捕获路由出错

比如当某个路由下发生错误的时候，可以捕获路由错误 可以捕获路由错误，通过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>