为什么React Router 7对React开发者来说是一次游戏规则的改变

教程

JavaScript

React Router 是创建 React 应用程序中导航的必备工具，其最新版本继续通过新增功能和性能提升来增强开发者的体验。从版本 7（或其他即将发布的版本）开始，React Router 带来了高级功能，如嵌套路由和布局路由，这些功能有助于构建健壮且高效的网络应用程序。

React Router 7（或最新版本）的主要新特性

以下是最新版本中引入的一些重要改进和特性：

1. 使用数据 API 简化路由定义

新的数据 API，如loader和action，允许以更声明式的方式在路由内获取和修改数据。

在旧版本中，数据获取通常是在 React 组件内部使用useEffect或类组件的生命周期方法来处理的。这往往导致数据获取逻辑与 UI 渲染混合，可能会变得复杂。

React Router v5 示例

JavaScript

import { useEffect, useState } from 'react';

import { useParams } from 'react-router-dom';

​

function UserPage() {

  const { id } = useParams();

  const [userData, setUserData] = useState(null);

​

  useEffect(() => {

    fetch(`/api/users/${id}`)

      .then((response) => response.json())

      .then((data) => setUserData(data));

  }, [id]);

​

  return (

    <div>

      <h1>User: {userData?.name}</h1>

    </div>

  );

}

​

最新版本引入了Loader API，允许直接在路由级别进行数据获取。这分离了关注点，简化了组件，并使得并发渲染成为可能。

React Router v7 示例

JavaScript

import { useLoaderData } from 'react-router-dom';

​

export async function userLoader({ params }) {

  const response = await fetch(`/api/users/${params.id}`);

  return response.json();

}

​

function UserPage() {

  const userData = useLoaderData();

  return (

    <div>

      <h1>User: {userData.name}</h1>

    </div>

  );

}

​

// Route Configuration

<Route path="/users/:id" element={<UserPage />} loader={userLoader} />

​

区别

在React Router 7中，数据获取逻辑（userLoader）与组件解耦，使得组件纯粹关注于渲染。这种方法还允许在组件渲染之前预获取数据，从而提供更好的用户体验和更平滑的过渡。

2. 每个路由的错误边界

React Router 7（或最新版本）引入的一个有用功能是能够为每个路由定义错误边界。这允许开发者在更细粒度上处理错误。而不是为整个应用程序设置一个全局的错误边界，你可以定义特定于单个路由的错误边界，使错误处理更加灵活和本地化。现在可以在路由级别进行细粒度的错误处理。

在旧版本中，错误处理是全局的或仅在组件级别管理。这要求开发者在同一个位置处理所有可能的错误，或者在各个组件中引入复杂的逻辑。如下面的示例所述，ErrorBoundary是全局的，因为它包裹了整个Router，这意味着它会捕获应用内所有路由的错误。

React Router v5示例

JavaScript

function App() {

  return (

    <ErrorBoundary>

      <Router>

        <Route path="/" exact component={HomePage} />

        <Route path="/about" component={AboutPage} />

      </Router>

    </ErrorBoundary>

  );

}

​

React Router 7引入了路由级别的错误边界，使得可以针对特定路由处理错误。这允许对错误的管理和显示有更细粒度的控制。

React Router v7示例

JavaScript

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

​

function ErrorBoundary() {

  const error = useRouteError();

  return <div>Error: {error.message}</div>;

}

​

<Route path="/users/:id" element={<UserPage />} errorElement={<ErrorBoundary />} />

​

区别

React Router 7 中的错误处理更加模块化和本地化。每个路由都可以定义自己的错误处理逻辑，当应用的不同部分失败时，提高了用户体验。

3. 更好的布局路由处理

布局路由 的引入，允许在整个应用的不同部分之间进行一致的布局管理，减少了代码重复。

在 React Router v5 中，像头部、尾部或侧边栏这样的布局必须在每一个路由或组件中手动重复。这意味着开发者经常将布局组件（例如，Header、Footer）直接放在 App 组件内或者在不同路由处理器中重复它们，如下面的例子所示。

React Router v5 示例

JavaScript

import { BrowserRouter as Router, Route } from 'react-router-dom';

import Header from './Header';

import Footer from './Footer';

import HomePage from './HomePage';

import AboutPage from './AboutPage';

​

function App() {

  return (

    <Router>

      <Header />

      <Route path="/" exact component={HomePage} />

      <Route path="/about" component={AboutPage} />

      <Footer />

    </Router>

  );

}

​

React Router 7 引入了布局路由，您可以在其中定义共享布局来包裹嵌套路由，消除了代码重复，并确保了更好的结构。

React Router v7 示例

JavaScript

import { Outlet } from 'react-router-dom';

​

function SharedLayout() {

  return (

    <div>

      <header>Header Content</header>

      <main>

        <Outlet /> {/* Nested routes will render here */}

      </main>

      <footer>Footer Content</footer>

    </div>

  );

}

​

// Route Configuration with Layout

<Route path="/" element={<SharedLayout />}>

  <Route index element={<HomePage />} />

  <Route path="about" element={<AboutPage />} />

</Route>

​

区别

布局路由提供了一种简洁且可重用的方式来跨多个路由应用共享布局，而无需重复代码。 Outlet 作为子路由的占位符，使得管理布局变得更加容易。

4. 增强的嵌套路由功能

有更有效的方法来处理嵌套路由，包括布局元素的继承和更好的数据获取策略。

在旧版本中，嵌套路由是可能的，但设置较为繁琐。您必须在父组件中显式处理路由嵌套，使用useRouteMatch()获取当前路径，然后在父组件内手动定义嵌套路由。这种方法对于具有多层嵌套路由的复杂应用程序来说，可能会很快变得繁琐。

React Router v5示例

JavaScript

import { Route, useRouteMatch } from 'react-router-dom';

​

function Dashboard() {

  const { path } = useRouteMatch();

  return (

    <div>

      <h1>Dashboard</h1>

      <Route path={`${path}/overview`} component={Overview} />

      <Route path={`${path}/settings`} component={Settings} />

    </div>

  );

}

​

<Route path="/dashboard" component={Dashboard} />

​

在React Router 7中，嵌套路由现在可以直接在路由配置中以声明性的方式配置，简化了路由结构并使代码更易读。

React Router v7示例

JavaScript

import { Outlet } from 'react-router-dom';

​

function DashboardLayout() {

  return (

    <div>

      <h1>Dashboard</h1>

      <Outlet /> {/* Nested routes will render here */}

    </div>

  );

}

​

// Route Configuration

<Route path="/dashboard" element={<DashboardLayout />}>

  <Route path="overview" element={<Overview />} />

  <Route path="settings" element={<Settings />} />

</Route>

​

区别

在React Router 7中，由于嵌套路由是在路由配置级别使用Outlet组件定义的，因此更易于管理。这种结构促进了布局和内容之间的清晰分离。

5. 改进的Suspense集成

现在，对React 18的Suspense和并发渲染提供了更好的支持，以实现更平滑的加载体验。

在旧版本中，Suspense仅支持旧版本中的懒加载组件，限制了它在复杂数据获取场景中的实用性。

React Router v5示例

JavaScript

import React, { Suspense, lazy } from 'react';

const HomePage = lazy(() => import('./HomePage'));

​

<Suspense fallback={<div>Loading...</div>}>

  <Route path="/" component={HomePage} />

</Suspense>

​

React Router 7集成了WXYZ与其加载器和操作API，使得可以更平滑、并发地获取数据，且几乎不需要额外努力。

React Router v7示例

JavaScript

import { Suspense } from 'react';

import { Route, Routes } from 'react-router-dom';

​

function App() {

  return (

    <Suspense fallback={<div>Loading...</div>}>

      <Routes>

        <Route path="/" element={<HomePage />} />

        <Route path="/about" element={<AboutPage />} />

      </Routes>

    </Suspense>

  );

}

​

区别

React Router 7利用WXYZ实现懒加载组件和数据获取，使得转换更平滑，用户界面响应更迅速。

结论

React Router 7（或最新版本）通过引入多项强大功能显著提升了React应用中的路由功能。新的加载器和操作API实现了声明式数据获取，将数据逻辑与组件分离，使代码更清晰。 布局路由简化了共享布局的管理，减少了冗余。 嵌套路由更加高效直观，使得结构更清晰。此外，每个路由的错误边界提供了更细致的错误处理，提高了可靠性。与React WXYZ的完全集成支持更平滑的数据加载和用户体验。这些进步一起简化了复杂、可扩展且性能优良的React应用的开发，使React Router 7相比之前的版本有了实质性的提升。

Source:
https://dzone.com/articles/why-react-router-7-is-a-game-changer-for-react-devs