背景

每次打開 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(        ,);