Como mencioné, tengo MUI Theme Provider with Layout que incluye Dashboard, Order screens...
Cuando el usuario presiona el punto final '/', debería devolver la pantalla de inicio de sesión, pero el diseño sigue mostrándose.
-Aplicación.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>);
-Diseño.js
... Barra de aplicaciones, barra lateral, etc.
<div style={{width:'100%'}}> <div className={classes.toolbar}></div> {children} </div>Tal como está, el código representa incondicionalmente un componente de Layout fuera del Switch , por lo que se representa independientemente de la ruta coincidente actualmente.
Si desea que el componente Layout solo se represente en ciertas rutas, procéselo condicionalmente con esas rutas.
Ejemplo, represente el componente de inicio de Login exactamente en la ruta "/" , todo lo demás en una ruta que represente el Layout y otro 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>