我面临一个我无法理解的问题。我正在开发一个 React 代码库，我们开始有太多的路由，所以我决定稍微重构一下。有一些逻辑可以确定我们是否应该重定向到将检查您是否已通过身份验证的路由，如果没有，则将您重定向到登录页面。我们也有没有那种机制的基本路由，只显示一个组件（对于每个不需要身份验证的页面，比如登录、忘记密码等）

我决定在一个不同的组件中抽象出这个逻辑，这将最终渲染一个路由。

这是路线的代码：

      <Switch>

        {Object.values(userRoutes).map((route: SanitizedRoute) => (
          <RouteController route={route} key={route.PATH} />
        ))}
      </Switch>

路由器控制器.tsx

  return (
    <Route
      path={route.PATH}
      exact={route.EXACT}
      render={() => {
        return <Layout>{route.COMPONENT}</Layout>;
      }}
    />
  );

Route 组件的所有信息都作为 prop 向下传递。如果我尝试访问/path_b呈现的是我的userRoute阵列的第一条路线。访问任何路径实际上都会回传第一条路由，就好像它是map回圈输出的唯一一条一样。

如果我RouteController用它的内容替换组件：

<Switch>
    {Object.values(userRoutes).map((route: SanitizedRoute) => (
          <Route
            path={route.PATH}
            exact={route.EXACT}
            key={route.PATH}
            render={() => {
              return <Layout>{route.COMPONENT}</Layout>;
            }}
          />
        ))}
</Switch>

然后一切都会按预期正常作业。RouteController用一个组件包装我Switch也可以正常作业 - 尽管我不确定每条路线都有一个 Switch 的副作用吗？

      {Object.values(userRoutes).map((route: SanitizedRoute) => (
        <Switch key={route.PATH}>
          <RouteController route={route} />
        </Switch>
      ))}

我的问题是：

• 为什么不能将所有这些路由包装在一个中？
• 是否有来自组件的一些道具我应该通过 my 手动传递给组件？
• 我知道用于渲染与路径匹配的第一条路线。首先使用a的目的是否有多种失败？

uj5u.com热心网友回复：

这是因为Switch组件的作业方式，它呈现第一个孩子<Route>或<Redirect>与位置匹配。

转变

组件两者RouteController都不是，因此它不参与匹配，实际上只会渲染第一个组件。这就是为什么无论路径如何，您都只会看到渲染的第一条路线。

可以在可能用于路径匹配的路径上移动/定义path道具（和任何其他“路线”道具），但这是不明智的，并且不是和组件的记录用例。RouteControllerSwitchSwitchRoute

是的，如果您要渲染多个Switch组件，每个组件只有一个Route组件，那么此时它们并没有真正切换路由，您依赖于任何包装路由器的包容性路由匹配，或者在任何其他情况下完全匹配包装开关。

解决方案

与其尝试将路由映射到您的RouterController组件中并处理直接组成什么的问题，不如让您将所有RouterController路由作为道具使用，并将它们渲染到单个组件中。Switch

路由器控制器.tsx

const RouterController = ({ routes }) => {
  // any component business logic

  return (
    <Switch>
      {routes.map((route: SanitizedRoute) => (
        <Route
          path={route.PATH}
          exact={route.EXACT}
          key={route.PATH}
          render={() => <Layout>{route.COMPONENT}</Layout>}
        />
      ))}
    </Switch>
  );
};

...

<RouterController routes={Object.values(userRoutes)} />