正如我提到的，我有帶有布局的 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>
);
-Layout.js
...AppBar，側邊欄等
<div style={{width:'100%'}}>
<div className={classes.toolbar}></div>
{children}
</div>
uj5u.com熱心網友回復：
照原樣，代碼無條件地在Layout之外渲染組件Switch，因此無論當前匹配的路由如何，它都會被渲染。
如果您希望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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/432114.html