reactjs 与react router 6.4+中基于组件的路由相比，基于配置的路由有哪些优势

在react-router 6.4之前，我很乐意使用<Routes>和<Route>组件来声明我的路由。无论我在哪里需要一些依赖于路由的渲染，我都可以使用这两个组件。再次通过在嵌套组件中使用<Routes>和<Route>组件。我甚至能够在一个组件中使用多个相邻的Routes容器。
我很喜欢这个，因为它使事情变得很小，嵌套的路由可以在嵌套的组件中处理，而不需要膨胀根组件。但最重要的是，我喜欢它，因为看到你的代码中的路由，它们实际上将被呈现，使代码非常可读，易于可视化。
现在，随着react-router 6.4的出现，他们似乎更多地转向了基于配置的路由风格，即在根级别定义所有路由。在一些采访中，很明显，维护人员为他们现在可以在根级别定义嵌套路由而感到自豪。https://reactrouter.com/en/main/start/overview#nested-routes使用这种方法，您需要在要呈现嵌套路由的位置使用<Outlet/>组件。在阅读代码时，您需要交叉引用那些Outlet位置与根级别上的配置，以确定在哪里呈现什么，这使得事情更难在脑海中想象。
所以我的问题是：使用这种配置方法的好处是什么？2猜猜为什么维护人员要走这条路？

说明

首先，自从引入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中。

下行路由适用于代码/路由拆分。

问题

所以我的问题是：使用这种配置方法的好处是什么？2猜猜为什么维护人员要走这条路？
RRDv6.4引入了一个新的数据API，它使用了新的数据路由器。请参见Picking a Router。随着新的数据路由器一起，更新了Route组件，该组件具有一系列新的属性/功能，可以在这些新的数据路由器中使用。现在，问题就在这里。为了使Route组件能够利用新的数据API（action、errorElement、loader和shouldRevalidate属性），它们***必须***在创建数据路由器时进行定义/配置。无论您是将路由“配置”对象与createBrowserRouter一起使用，还是将JSX与createBrowserRouter和createRoutesFromElements实用程序一起使用，需要数据API的所有路由都需要在这里声明。
“优点”是你可以通过这些途径使用新的数据API。当然，库维护者会宣传和突出他们的最新产品和功能。
AFAIK，Data API目前不支持派生路由，因为它们可能是动态的，而且对于Route组件来说，没有一种简单的方法可以知道在运行时它的子ReactTree中可能呈现哪些派生Route组件。当您提前确切地知道可以呈现哪些路由以及它们可以管理哪些数据时，设置和维护DataAPI的开销就变得微不足道了。

reactjs 与react router 6.4+中基于组件的路由相比，基于配置的路由有哪些优势

1条答案

说明

问题

相关问题

热门标签

最新问答