Javascript 登录屏幕布局不断显示 React 和 React 路由

发布于02月25日

正如我提到的，我有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>

推荐答案

按原样，代码无条件地呈现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>