登录屏幕布局不断显示 - React & React 路由器

Question

正如我所提到的，我有一个带布局的MUI主题提供程序，它包括仪表板、订单屏幕。。。

当用户点击"/"端点时，它应该返回登录屏幕，但布局会一直显示出来。

-App.js

<ThemeProvider theme={theme}>
<Router>
<Layout>
<Switch>
<Route exact path="/">
<Login />
</Route>
<Route  path="/dashboard">
<Dashboard />
</Route>
<Route path="/orders">
<Orders />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/employees">
<Employee />
</Route>
</Switch>
</Layout>
</Router>
</ThemeProvider>

)；

-布局.js

AppBar、边栏等

<div style={{width:'100%'}}>
<div className={classes.toolbar}></div>
{children}
</div>

Answer 1

按原样，代码无条件地在Switch之外呈现Layout组件，因此无论当前匹配的路由如何，都会对其进行渲染。

如果希望Layout组件仅在某些路由上渲染，请有条件地使用这些路由进行渲染。

例如，将Login组件完全呈现在"/"路径上，将其他所有组件都呈现到呈现Layout和另一个Switch的路由中。

<ThemeProvider theme={theme}>
<Router>
<Switch>
<Route exact path="/">
<Login />
</Route>
<Route path="/">
<Layout>
<Switch>
<Route  path="/dashboard">
<Dashboard />
</Route>
<Route path="/orders">
<Orders />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/employees">
<Employee />
</Route>
</Switch>
</Layout>
</Route>
</Switch>
</Router>
</ThemeProvider>