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 routter的一部分(

如果您了解了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，除非你有非常具体的需求，否则我不会建议你使用它。