![](/img/trans.png)
[英]Wrap a React Router Routes with an Auth Component inside a Switch
[英]React Router Switch statement with routes grouped as component inside does not go to Not Found route
如果找不到路由,我将尝试呈现“未找到”页面。 我将路由分隔为模块。 因此,当我执行switch语句时,在开关底部添加未找到的页面,例如:
const AccessRoutes = () => {
return (
<React.Fragment>
<Route path="/login" exact component={Login}/>
<Route path="/register" exact component={Register} />
<Route path="/forgot-password" exact component={ForgotPassword}/>
</React.Fragment>
)
}
export default () => {
return (
<Switch>
<AccessRoutes/>
<Route render={() => <div>Not found</div>}
</Switch>
)
}
当您输入不在AccessRoutes
上的路径时,找不到路径永远不会匹配,例如/hey
显示空白屏幕。 如果我放置路线而没有将它们包装在另一个组件中,那么它将起作用。
我想念什么?
也许这可以帮助您:
export const routes = [
{
path: '/login',
exact: true,
component: Login
}, {
path: '/register',
exact: true,
component: Register
}, {
path: '/forgot-password',
exact: true,
component: ForgotPassword
}, {
path: '*',
component: () => <div>Not found</div>
}
];
export default () => {
return (
<Switch>
{
routes.map(
(route, index) => <Route key={index} {...route}/>
)
}
</Switch>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.