Estoy usando react-router-dom en mi aplicación reactjs, y tengo este bloque al final de mis rutas para redirigir todas las rutas incorrectas a esta:
<Router> <React.Suspense fallback={loading}> <Switch> //...all my routes... //at the end of my routes I have this <Route path="*"> <Redirect to="/dashboard" /> </Route> </Switch> </React.Suspense> </Router>Si agrego una ruta aleatoria como /nonexistentroute , me redirige a /dashboard pero, si estoy en una ruta específica como /home y hago clic en el botón de actualización de Chrome, se me redirige a /dashboard cuando debería mantenme en la misma ruta. ¿Cómo puedo arreglarlo?
Según su descripción, parece que está procesando varias rutas en un enrutador sin un componente Switch . Los enrutadores coinciden y representan rutas de forma inclusiva , mientras que el Switch coincide y representa exclusivamente el primer componente Route o Redirect . En otras palabras, un enrutador generará todas las coincidencias, incluidos los redireccionamientos, el Switch representa solo la primera.
Envuelva sus rutas en un Switch y coloque la redirect en último lugar en la lista, de modo que si ninguna otra ruta coincidió previamente, la Redirect se procesará.
<Switch> ... all other routes ... <Redirect to="/dashboard" /> </Switch> Este OFC, todo asume que todavía está usando react-router-dom v5 ya que no mencionó ningún error de importación del componente Redirect ( Redirect se eliminó en RRDv6 ). Si este no es el caso y en realidad está utilizando RRDv6, actualice su pregunta para incluir un ejemplo de código más completo.
Intenta escribir así si estás usando la versión 6 de react-router-dom
<Routes> <Route path="/" element={<Homepage />} /> <Route path="*" element={<ErrorPage />} /> </Routes>Puede usar Navigate desde la última versión de react-router-dom para redirigir a una página diferente.
import React, { Component } from 'react'; import Test_1 from './components/Test_1'; import Test_2 from './components/Test_2'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { Navigate } from 'react-router-dom'; class App extends Component { render() { return ( <Router> <Routes> <Route path='/' element={<Test_1 />} /> <Route path='/home' element={<Test_2 />} /> <Route path='*' element={<Navigate to='/' />} /> </Routes> </Router> ); } } export default App;