背景

每次打開(kāi) React Router 官方文檔，都會(huì)有驚嚇，API又又又變了！這次看看有什么更新。

(資料圖片僅供參考)

好家伙！這是我認(rèn)知中的 React Router 嗎？

我2022年3月開(kāi)發(fā)《聯(lián)機(jī)桌游合集》時(shí)，在用 6.2 版本，那時(shí)候 v6 跟 v5 v4 相比，API 已經(jīng)發(fā)生了比較大的變化，但我認(rèn)可這些變化。

現(xiàn)在看完 6.4 版本文檔， 我想吐槽。 我的核心觀點(diǎn)是：React Router 6.4 不再是純粹的路由組件了，它耦合了數(shù)據(jù)獲取邏輯。

下面本文 客觀介紹: React Router 6.4 引入的新功能 Data API，并在最后給 主觀結(jié)論。

1. 新增 createXXXXRouterAPI

1.1 介紹

在 React Router 6.4 中，新增了 3 個(gè) createXXXXRouterAPI，用于支持 data API：

也就是說(shuō)，如果你不用這3個(gè)API，而是像v6.0-v6.3一樣，直接使用等下面幾個(gè)API，那么你享受不到 data API。

1.2 createXXXXRouter用法

必須結(jié)合一起使用。可以看到，它使用一個(gè)配置，定義路由。

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定義路由

當(dāng)然，如果你喜歡用JSX語(yǔ)法定義路由，像一樣：

      } />  

React Router 6.4 也提供了JSX配置，參考createRoutesFromElements，它有另外一個(gè)名字叫createRoutesFromChildren。

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

2. 的變化

2.1 什么是 Data API？

當(dāng)你使用createXXXXRouter和時(shí)，你就可以使用 Data API。

說(shuō)了這么多，什么是 Data API 呢？

其實(shí)就是允許你把「數(shù)據(jù)獲取邏輯」寫(xiě)到路由定義中。每當(dāng)路由切換到那里時(shí)，會(huì)自動(dòng)獲取數(shù)據(jù)。

我們從的變化就可以看出，它新增了3個(gè)相關(guān)的屬性：

2.2 loader 屬性

loader屬性傳入一個(gè)函數(shù)（允許是 async function），每次渲染「該路由對(duì)應(yīng)的element」前執(zhí)行函數(shù)。在「該路由對(duì)應(yīng)的element」內(nèi)，可以使用 hookuseLoaderData（下文會(huì)介紹）來(lái)獲取這個(gè)函數(shù)的返回值（通常是http請(qǐng)求的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 參數(shù)

loader屬性傳入的函數(shù)，允許有2個(gè)參數(shù)：

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

不要這個(gè) request 參數(shù)行嗎？不行，因?yàn)槿绻阌?code>window.location獲取的信息是當(dāng)前最新的值，如果用戶快速的點(diǎn)擊按鈕，讓頁(yè)面路由到A，并立馬路由到B，這時(shí)候路由A對(duì)應(yīng)的Route的loader獲取window.location時(shí)，就可能拿到錯(cuò)誤的值。

注意，傳遞 request，還有個(gè)好處，它有個(gè) request.signal，當(dāng)用戶快速的點(diǎn)擊按鈕，讓頁(yè)面路由到A，并立馬路由到B，頁(yè)面A的loader的請(qǐng)求應(yīng)該被取消掉，可以通過(guò) signal 實(shí)現(xiàn)，如下：

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

2.2.2 loader 返回值

函數(shù)的返回值，將可以在element中通過(guò)hook useLoaderData（下文會(huì)介紹）來(lái)獲取。你返回什么，它就拿到什么。

但是 React Router 官方建議，返回一個(gè) Web規(guī)范 中的 Fetch API 的 Response。

你可以直接 return fetch(url, config);，也可以自己構(gòu)造一個(gè)假的 Response:

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

也可以通過(guò) React Router 提供的 json 來(lái)構(gòu)造：

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 中，可能校驗(yàn)后需要重定向，React Router 不建議你用 useNavigation 完成，建議直接在 loader 中直接 return redirect，跳轉(zhuǎn)到新的網(wǎng)址。

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

2.2.3 loader 內(nèi)拋出異常

如果數(shù)據(jù)獲取失敗，或者其它任何原因，你認(rèn)為不能讓 Route 對(duì)應(yīng)的 element 正常渲染了，你都可以在 loader 中 throw 異常。這時(shí)候，「errorElement」就會(huì)被渲染。

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 內(nèi)通過(guò) hook useRouteError來(lái)獲取到異常。

但是，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 方法，方便的構(gòu)造個(gè) Response：

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

2.3 element 屬性

這個(gè)不是新屬性，即被匹配后，渲染的內(nèi)容。我想介紹它的變化：

2.3.1 內(nèi)部可用 useLoaderData獲取 loader 返回值

注意，如果 loader 返回值是 Response，并且 Response 的 Content Type 是 application/json，React Router 內(nèi)部會(huì)自動(dòng)調(diào)用 .json() 方法，開(kāi)發(fā)者不必寫(xiě) .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(); // 這個(gè)不會(huì)展示 Loading 態(tài)，因?yàn)樗?await 了，會(huì)等它執(zhí)行完并拿到數(shù)據(jù)    let reviews = getReviews(); // 這個(gè)會(huì)展示 Loading 態(tài)    return defer({      book, // 這是數(shù)據(jù)      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(        ,);