背景

每次打开 React Router 官方文档，都会有惊吓，API又又又变了！这次看看有什么更新。

(相关资料图)

好家伙！这是我认知中的 React Router 吗？

我2022年3月开发《联机桌游合集》时，在用 6.2 版本，那时候 v6 跟 v5 v4 相比，API 已经发生了比较大的变化，但我认可这些变化。

现在看完 6.4 版本文档， 我想吐槽。 我的核心观点是：React Router 6.4 不再是纯粹的路由组件了，它耦合了数据获取逻辑。

下面本文 客观介绍: React Router 6.4 引入的新功能 Data API，并在最后给 主观结论。

1. 新增 createXXXXRouterAPI

1.1 介绍

在 React Router 6.4 中，新增了 3 个 createXXXXRouterAPI，用于支持 data API：

也就是说，如果你不用这3个API，而是像v6.0-v6.3一样，直接使用等下面几个API，那么你享受不到 data API。

1.2 createXXXXRouter用法

必须结合一起使用。可以看到，它使用一个配置，定义路由。

import * as React from "react";import * as ReactDOM from "react-dom";import {  createBrowserRouter,  RouterProvider,} from "react-router-dom";const router = createBrowserRouter([  {    path: "/",    element: ,    children: [      {        path: "team",        element: ,      },    ],  },]);ReactDOM.createRoot(document.getElementById("root")).render(  );

1.3 也可用JSX定义路由

当然，如果你喜欢用JSX语法定义路由，像一样：

      } />  

React Router 6.4 也提供了JSX配置，参考createRoutesFromElements，它有另外一个名字叫createRoutesFromChildren。

const router = createBrowserRouter(  createRoutesFromElements(    }>      } />      } />      ));

2. 的变化

2.1 什么是 Data API？

当你使用createXXXXRouter和时，你就可以使用 Data API。

说了这么多，什么是 Data API 呢？

其实就是允许你把「数据获取逻辑」写到路由定义中。每当路由切换到那里时，会自动获取数据。

我们从的变化就可以看出，它新增了3个相关的属性：

2.2 loader 属性

loader属性传入一个函数（允许是 async function），每次渲染「该路由对应的element」前执行函数。在「该路由对应的element」内，可以使用 hookuseLoaderData（下文会介绍）来获取这个函数的返回值（通常是http请求的response）。

 {    // loaders can be async functions    const res = await fetch("/api/user.json", {      signal: request.signal,    });    const user = await res.json();    return user;  }}  element={}/>

2.2.1 loader 参数

loader属性传入的函数，允许有2个参数：

 {    const url = new URL(request.url);    const searchTerm = url.searchParams.get("q");    return searchProducts(searchTerm);  }}/>

不要这个 request 参数行吗？不行，因为如果你用window.location获取的信息是当前最新的值，如果用户快速的点击按钮，让页面路由到A，并立马路由到B，这时候路由A对应的Route的loader获取window.location时，就可能拿到错误的值。

注意，传递 request，还有个好处，它有个 request.signal，当用户快速的点击按钮，让页面路由到A，并立马路由到B，页面A的loader的请求应该被取消掉，可以通过 signal 实现，如下：

 {    return fetch("/api/teams.json", {      signal: request.signal,    });  }}/>

2.2.2 loader 返回值

函数的返回值，将可以在element中通过hook useLoaderData（下文会介绍）来获取。你返回什么，它就拿到什么。

但是 React Router 官方建议，返回一个 Web规范 中的 Fetch API 的 Response。

你可以直接 return fetch(url, config);，也可以自己构造一个假的 Response:

function loader({ request, params }) {  const data = { some: "thing" };  return new Response(JSON.stringify(data), {    status: 200,    headers: {      "Content-Type": "application/json; utf-8",    },  });}//...

也可以通过 React Router 提供的 json 来构造：

import { json } from "react-router-dom";function loader({ request, params }) {  const data = { some: "thing" };  return json(data, { status: 200 });}//...

2.2.2.1 特殊返回值: redirect

在 loader 中，可能校验后需要重定向，React Router 不建议你用 useNavigation 完成，建议直接在 loader 中直接 return redirect，跳转到新的网址。

import { redirect } from "react-router-dom";const loader = async () => {  const user = await getUser();  if (!user) {    return redirect("/login");  }};

2.2.3 loader 内抛出异常

如果数据获取失败，或者其它任何原因，你认为不能让 Route 对应的 element 正常渲染了，你都可以在 loader 中 throw 异常。这时候，「errorElement」就会被渲染。

function loader({ request, params }) {  const res = await fetch(`/api/properties/${params.id}`);  if (res.status === 404) {    throw new Response("Not Found", { status: 404 });  }  return res.json();}//...

注意：你可以抛出任何异常，都可以在 errorElement 内通过 hook useRouteError来获取到异常。

但是，React Router 官方建议你 throw Response：

}  errorElement={}  loader={async ({ params }) => {    const res = await fetch(`/api/properties/${params.id}`);    if (res.status === 404) {      throw new Response("Not Found", { status: 404 });    }    const home = res.json();    return { home };  }}/>

你依然可以用 React Router 提供的 json 方法，方便的构造个 Response：

throw json(  { message: "email is required" },  { status: 400 },);

2.3 element 属性

这个不是新属性，即被匹配后，渲染的内容。我想介绍它的变化：

2.3.1 内部可用 useLoaderData获取 loader 返回值

注意，如果 loader 返回值是 Response，并且 Response 的 Content Type 是 application/json，React Router 内部会自动调用 .json() 方法，开发者不必写 .json() 了。

function Albums() {  const albums = useLoaderData();  return 
{albums}
;}const router = createBrowserRouter([  {    path: "/",    loader: fetch("/api"),    element: ,  },]);ReactDOM.createRoot(el).render(  );

createBrowserRouter([  {    path: "/",    loader: () => fetchUser(),    element: ,    id: "root",    children: [      {        path: "jobs/:jobId",        loader: loadJob,        element: ,      },    ],  },]);

const user = useRouteLoaderData("root");

const error = useRouteError();

function RootBoundary() {  const error = useRouteError();  if (isRouteErrorResponse(error)) {    if (error.status === 404) {      return 
This page doesn"t exist!
;    }    if (error.status === 503) {      return 
Looks like our API is down
;    }  }  return 
Something went wrong
;}

 {    let book = await getBook(); // 这个不会展示 Loading 态，因为它被 await 了，会等它执行完并拿到数据    let reviews = getReviews(); // 这个会展示 Loading 态    return defer({      book, // 这是数据      reviews, // 这是 promise    });  }}  element={}/>;

function Book() {  const {    book,    reviews, // this is the same promise  } = useLoaderData();  return (    
      
{book.title}
      
{book.description}
      }>                                  />          
  );}

  {(resolvedReviews) => }

  ;function Reviews() {  const resolvedReviews = useAsyncValue();  return 
{/* ... */}
;}

"react": "^18.2.0","react-dom": "^18.2.0","react-scripts": "5.0.1",

import React from "react";import ReactDOM from "react-dom/client";const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);root.render(      
  ,);

import React from "react";import ReactDOM from "react-dom/client";import { BrowserRouter, Routes, Route } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);root.render(                    } />            ,);

import React from "react";import ReactDOM from "react-dom/client";import {  createBrowserRouter,  RouterProvider,} from "react-router-dom";import "./index.css";const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);const router = createBrowserRouter([  {    index: true,    element: 
,  },]);root.render(        ,);