React路由器-映射带有404错误页的路由

Question

我目前正在使用React路由器。我更喜欢路由配置文件的语法和映射，而不是路由数组来呈现路由，而不是

{routes.map(route => {
        return (
          <PrivateRoute
            key={route.path}
            path={route.path}
            exact
            component={route.component}
          />
        );
      })}

在上述用例中，是否有一种方法可以为所有非精确匹配路由提供404组件。

我已经看到了




Answer 1

如果要在配置文件中定义路由，则可能应该使用react router配置（它也是react router的一部分）

如果您看了一下renderRoutes的实现，那么您会注意到它在内部使用了一个Switch组件，这意味着您可以将您的404路由放在列表的末尾，并且它应该回退到如果没有其他匹配，例如：

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      },
      {
        path: "*",
        component: NotFound,
      },
    ]
  }
]

您还可以实现这样的组件：

const RedirectToNotFound = () => <Redirect to="/404" />;

然后像这样设置配置文件：

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      },
      {
        path: "/404",
        component: NotFound
      },
      {
        path: "*",
        component: RedirectToNotFound,
      },
    ]
  }
]

充分披露：我从未使用过react router config，除非您有非常特殊的需要，否则我不会推荐使用它。