我需要为一些Auth路由(
/login
,sign-up
,forgot-password
等)提供一个通用布局(标题,页脚)。而我需要为应用程序的其余受保护部分(
Home
,Dashboard
等)提供另一个通用布局。我需要一个没有任何布局的404页面。
- React Router v4的多个布局
- https://simonsmith.io/reusing-layouts-in-react-router-4
- React Router v4 / v5的嵌套路由
- https://reacttraining.com/react-router/web/example/route-config
这是我目前拥有的内容:
(注意:暂时忽略将非登录用户阻止进入AppLayout的私有路由的需求,我会在此之后处理。)
const App: React.FC = () => {
const history = createBrowserHistory();
return (
<div className="App">
<Router history={history}>
<Switch>
<AppLayout>
<Route path="/home" component={HomePage}/>
<Route path="/dashboard" component={DashboardPage}/>
...
</AppLayout>
<AuthLayout>
<Route path="/login" component={LoginPage}/>
<Route path="/sign-up" component={SignUpPage}/>
...
</AuthLayout>
<Route path="*" component={NotFoundPage} />
</Switch>
</Router>
</div>
);
};
export default App;
AuthLayout
和AppLayout
都很简单,它们非常相似(只是每个布局的页眉/页脚不同):
class AppLayout extends Component {
render() {
return (
<div className="AppLayout">
<header>...</header>
{this.props.children}
<footer>...</footer>
</div>
);
}
}
export default AppLayout;
问题在于只有来自AppLayout的路由会被呈现。其他路由只是显示了AppLayout的header和footer而没有任何内容。
这些是我使用的React版本:
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
任何帮助都将不胜感激。
提前感谢您。
/app/somethingnotfound
的地址,它不会跳转到NotFound
组件。 - Vencovsky