与使用 react 路由器 6.4+ 的基于组件的路由相比，基于配置的路由有哪些优势

Question

在 react-router 6.4 之前，我很高兴使用<Routes>和<Route>组件声明我的路由。 无论我想要什么路由相关的渲染，我都可以使用这两个组件。 我能够嵌套路由，再次通过在嵌套组件中使用<Routes>和<Route>组件。我甚至可以在一个组件中使用多个相邻的Routes容器。

我非常喜欢这个，因为它使事情变得很小，嵌套路由可以在嵌套组件中处理，并且不需要膨胀根组件。但最重要的是我喜欢它，因为看到代码中实际呈现它们的路由使代码非常可读且易于可视化。

现在有了 react-router 6.4，他们似乎更多地转向基于配置的路由风格，您可以在根级别定义所有路由。在一些访谈中，很明显，维护者为他们现在可以在根级别定义嵌套路由而感到自豪。https://reactrouter.com/en/main/start/overview#nested-routes 使用这种方法时，您需要在要呈现嵌套路由的位置使用<Outlet/>组件。在读取代码时，您将这些Outlet位置与根级别的配置交叉引用，以确定渲染的位置，这使得在心理上可视化变得更加困难。

所以我的问题来了：使用这种配置方法有什么好处。对维护者为什么要走这条路有什么猜测吗？

Answer 1

澄清

• 首先，自从引入react-router@6以来，您可以通过useRoutes钩子使用路由配置，或者只使用 RRD 组件并为它们定义 JSX。这是您描述的"基于配置"与"基于组件"的路由。这在RRDv6.4中并不是什么新鲜事。

  配置示例：

  import { useRoutes } from 'react-router-dom';
  const routes = [
  {
  element: <Layout />,
  children: [
  {
  path: "/foobar",
  element: <FooBar />
  },
  {
  path: "/foo",
  element: <Foo />
  },
  {
  path: "/bar",
  element: <Bar />
  },
  ],
  },
  {
  path: "/",
  element: <Home />
  },
  ];
  const App = () => {
  const appRoutes = useRoutes(routes);
  return appRoutes;
  };
  

  组件示例：

  import { Routes, Route } from 'react-router-dom';
  const App = () => (
  <Routes>
  <Route element={<Layout />}>
  <Route path="/foobar" element={<Foobar />} />
  <Route path="/foo" element={<Foo />} />
  <Route path="/bar" element={<Bar />} />
  <Route>
  <Route path="/" element={<Home />} />
  </Routes>
  );
  

  我相信在较旧的 RRD 文档中的某个地方直接指出，Routes组件是通过将您作为子级传递的 JSX 转换为路由配置对象来实现的，方法是在引擎盖下使用useRoutes钩子实现的。

• 其次，您所描述的"嵌套路由">实际上称为后代路由。另一方面，嵌套路由是直接呈现其他Route组件Route组件，这些组件将其内容呈现到其父路由的Outlet中。

  后代路由适用于代码/路由拆分。

问题

所以我的问题来了：使用这样的 配置方法。对维护者为什么要采取的任何猜测 这条路？

RRDv6.4引入了一个新的数据API，它使用新的数据路由器。请参阅选择路由器。随着新的数据路由器而来的是一个更新的Route组件，其中包含一系列新的道具/功能，可在这些新的数据路由器中使用。现在这就是摩擦。为了使Route组件能够利用新的数据API(action、errorElement、loader和shouldRevalidate属性)，它们必须在创建数据路由器时进行定义/配置。无论您将路由"配置"对象与createBrowserRouter一起使用，还是将 JSX 与createBrowserRouter和createRoutesFromElements实用程序一起使用，都需要在此处声明所有需要数据 API 的路由。

"优势"是您可以将新的数据 API 与这些路由一起使用。当然，图书馆维护者会宣传并突出他们的最新产品和功能。

AFAIK，数据 API 目前不适用于后代路由，因为这些路由可能是动态的，并且Route组件无法轻松知道运行时在其子 ReactTree 中可能在其下呈现哪些后代Route组件。这就是为什么嵌套路由至关重要的原因;当您提前确切知道可以呈现哪些路由以及它们可能管理哪些数据时，设置和维护数据 API 的开销是微不足道的。