Si voy a "/" o "/ detalles" con Recargar la página manualmente en el navegador, todo funciona bien.
Si voy a "/" o "/ detalles" con los enlaces de la barra de navegación, la URL cambia pero el contenido no se muestra.
Intenté usar la palabra clave "exacta" en la ruta "/ detalles", pero es lo mismo.
React-router-dom: Versión: 5.1
Aplicación.js:
import { BrowserRouter , Redirect, Route , Switch } from 'react-router-dom'; import './App.css'; import Navbar from './Navbar.js' import Home from './pages/Home' import Details from './pages/Details'; function App() { return ( <div className="App"> <BrowserRouter> <Navbar /> <Switch> <Route exact path="/" > <Home /> </Route> <Route path="/details" > <Details /> </Route> <Route path="*"> <Redirect to="/" /> </Route> </Switch> </BrowserRouter> </div> ); } export default App;Barra de navegación:
import './Navbar.css' import { NavLink , Link } from 'react-router-dom' export default function Navbar() { return ( <header > <ul > <li><Link to="/">Home</Link></li> <li><Link to="/details">Details</Link></li> <li><a href="https://www.google.com">Google</a></li> </ul> </header> ) }Intente usar Rutas en lugar de cambiar.
import { BrowserRouter , Redirect, Route , Routes, Switch } from 'react-router-dom'; <Routes> <Route exact path="/" > <Home /> </Route> <Route path="/details" > <Details /> </Route> <Route path="*"> <Redirect to="/" /> </Route> </Routes>espero que esto ayude
Actualice a React-router-dom: Versión: 5.3.3 porque la Versión: 5.1 tiene errores.
1. Desinstale cualquier versión que tenga npm uninstall -s react-router-dom@5.1 npm uninstall -s react-router-dom
2. Instale React-router-dom: Versión: 5.3.3 npm install -s react-router-dom@5.3.3
O vaya a esta publicación: Haga clic en mí para ir a la publicación