在登录屏幕布局不断显示 - React & React router

Question

正如我提到的，我有带布局的 MUI 主题提供程序，其中包括仪表板、订单屏幕...

当用户点击“/”端点时，它应该 return 登录屏幕，但布局一直显示自己。

-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

...应用栏、侧边栏等

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

Answer 1

As-is，代码无条件地在 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>

在登录屏幕布局不断显示 - React & React router

On login screen layout keeps showing - React & React router

javascript

reactjs

react-router

material-ui

react-router-dom