Esta es la función my App() en App.js, las composiciones: "Sidebar, Feed and Widgets" sigue mostrándose en la route ="/" y también en ="/login" , además de esa composición "Iniciar sesión" no ni siquiera renderizar en route ="/login" .
<Router> <div className="app"> <Switch> <Route path="/"> <Sidebar /> <Feed /> <Widgets /> </Route> <Route path="/login"> <Login /> </Route> </Switch> </div> </Router>Si está utilizando la última versión de react-router-dom , debe Switch el cambio a Routes
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import { Sidebar, Feed, Widgets } from '...' const Home = () => { return ( <Sidebar /> <Feed /> <Widgets /> ) } const App = () => { return ( <Router> <div className="app"> <Routes> <Route path="/" element={<Home />} /> <Route path="/login" element={<Login />} /> </Routes> </div> </Router> ) }El componente Switch hace coincidir y representa rutas exclusivamente, por lo que solo se puede hacer coincidir 1 ruta. Sin embargo, tiene un problema con el orden de sus rutas, por lo que solo coincide la ruta "/" ya que es anterior y se procesa. La ruta para "/login" nunca se puede alcanzar tal como está.
En otras palabras, esto significa que cuando la ruta es "/login" , ese "/" todavía coincide con ella y es la ruta representada. En react-router-dom v5, piense en los accesorios de path como un "prefijo de ruta".
¡En el componente Switch , el orden de las rutas y la especificidad son importantes! Debe ordenar las rutas de más específicas a menos específicas. Esto permite hacer coincidir rutas más específicas como "/login" antes de probar las rutas menos específicas.
<Router> <div className="app"> <Switch> <Route path="/login"> <Login /> </Route> <Route path="/"> <Sidebar /> <Feed /> <Widgets /> </Route> </Switch> </div> </Router>Debe agregar la ruta exacta con "/'".
En su caso, cuando no está agregando exactamente, el enrutador React hará coincidir la ruta '/ inicio de sesión' con la primera ruta '/' y se procesará en consecuencia sin verificar las siguientes rutas. Al agregar exacto, el primer '/' no coincidirá y coincidirá con la segunda ruta '/login'.
<Router> <div className="app"> <Switch> <Route path="/" exact> <Sidebar /> <Feed /> <Widgets /> </Route> <Route path="/login"> <Login /> </Route> </Switch> </div> </Router>Para obtener más información, también puede consultar esta pregunta similar: Reaccionar: diferencia entre <Ruta ruta exacta="/" /> y <Ruta ruta="/" />