Tengo el siguiente swtich usando react-router . Cuando abro una nueva pestaña y voy a cualquier ruta, siempre me redirige a /login . Si elimino el interruptor inferior (sin ruta, el valor predeterminado), funciona como se esperaba. Si navego a cualquier ruta que ya haya cargado la aplicación de reacción (es decir, desde /login ), funciona como se esperaba.
¿Por qué el interruptor no detecta el camino correcto aparentemente solo en la primera carga cuando se incluye el nomatch?
Editar : para mayor claridad, esto está usando hashRouter en localhost , react-router-dom v5.2
<Switch> <div className="loginForm align-middle"> <img src="./img/logo.svg" alt="Restocker logo" className="w-100 p-3 mb-4"/> <Route path="/verify"> <Verify/> </Route> <Route path="/reVerify"> <ReVerify/> </Route> <Route path="/register"> <Register/> </Route> <Route path="/forgotPassword"> <ForgotPassword/> </Route> <Route path="/resetPassword"> <Verify type={"password"}/> </Route> <Route path="/login"> <Login/> </Route> <Route> //same result using path="*" //no match - default to login <Redirect to="/login"/> </Route> </div> </Switch>Temas similares no parecen aplicarse a este escenario: se refieren a que no coinciden en absoluto (el mío sí lo hace una vez cargado) o son de versiones mucho más antiguas (2015).
Es importante tener en cuenta que la versión actual de react-router-dom v6 no admite el componente <switch> sino que usa el <BrowserRouter> que me gusta importar como <Router>
import { BrowserRouter as Router, Route, Routes, } from "react-router-dom"; Además, el v6 usa el componente <element> para llamar al componente que desea ejecutar en una ruta particular.
<Router> <Navbar/> <Routes> <Route path="/" element={<Home />} /> <Route path="about" element={<AboutPage />} /> <Route path="contact" element={<ContactPage />} /> </Routes> </Router>lo que significa que también tendrá que importar esos componentes.
import Navbar from "./components/NavBar"; import Home from "./pages"; import AboutPage from "./pages/aboutPage"; import ContactPage from "./pages/contactPage"; Incluí un componente Navbar y lo coloqué afuera dentro del <Router> pero fuera de las <Routes> para que la navegación aparezca en todas las rutas. Pero eso es más una elección de diseño.
También puede encontrarse con un problema en el que su ruta se abrirá y aparecerá en la misma área de la pantalla en la que estaba cuando hizo clic en la ruta. Avíseme si necesita ayuda con eso. Es posible que no lo necesite si su aplicación no supera la longitud de la página completa
Pensé que sería algo tonto: el div contenedor debería estar fuera del switch . Ahora funciona como se esperaba (también cambié a usar accesorios de component en lugar de elementos secundarios, pero ambos parecen funcionar una vez que se ha movido el div).
Código de trabajo:
<div className="loginForm align-middle"> <img src="./img/logo.svg" alt="Restocker logo" className="w-100 p-3 mb-4"/> <Switch> <Route path="/verify" component={Verify}/> <Route path="/reVerify" component={ReVerify}/> <Route path="/register" component={Register}/> <Route path="/forgotPassword" component={ForgotPassword}/> <Route path="/resetPassword" render={() => Verify("password")}/> <Route path="/login" component={Login}/> <Redirect to="/login"/> </Switch> </div> Tenga en cuenta que ahora todos los hijos directos de Switch ahora son solo Route
Editar modificado según el consejo de Drew Reese