React Router - 使用 404 错误页面映射路由

Question

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

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

上面的用例是否有办法为所有非精确匹配的路由提供 404 组件。

我见过这样的 <Switch> 方法：https://reacttraining.com/react-router/web/example/no-match。如前所述，我更喜欢在路由配置文件中声明所有路由，包括路径、组件和面包屑名称。如果我沿着 Switch 路线走下去，那么路线配置仅用于面包屑并且变得不那么有用

Answer 1

如果你打算在配置文件中定义你的路由，那么你应该使用 react-router-config（它也是 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,
      },
    ]
  }
]

您也可以实现这样的组件 RedirectToNotFound:

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 和 unless you have a very specific need 我不推荐使用它。

React Router - 使用 404 错误页面映射路由

React Router - Mapping routes with 404 error page

reactjs

react-router

react-router-redux

react-router-dom