Hola a todos estoy aprendiendo sobre react
y en este momento mas concretamente sobre react router
. Estoy usando la versión 5.2.0
del mismo. Sé que ya esta la versión 6 pero esa la aprenderé después. El problema es que al usar Link
para el menú de navegación al darle click me cambia la ruta y se puede ver en la url pero no me renderiza la nueva página.
El siguiente código es el que uso en el componente NavBar.jsx
.
import { Link } from "react-router-dom"
export default function NavBar() {
return (
<nav>
<ul>
<li>
<Link to="/">Inicio</Link>
</li>
<li>
<Link to="/nosotros">Nosotros</Link>
</li>
<li>
<Link to="/servicios">Servicios</Link>
</li>
<li>
<Link to="/contactos">Contactos</Link>
</li>
</ul>
</nav>
)
}
Y así lo estoy renderizando en mi archivo llamado AppRouter.js
:
import { Switch } from "react-router-dom"
import { BrowserRouter as Router, Route } from "react-router-dom"
import NavBar from "./components/NavBar"
import ContactosPage from "./pages/ContactosPage"
import InicioPage from "./pages/InicioPage"
import NosotrosPage from "./pages/NosotrosPage"
import NotFoundPage from "./pages/NotFoundPage"
import ServiciosPage from "./pages/ServiciosPage"
export default function AppRouter() {
return (
<Router>
<NavBar />
<Switch>
<Route path="/nosotros">
<NosotrosPage />
</Route>
<Route path="/contactos">
<ContactosPage />
</Route>
<Route path="/servicios">
<ServiciosPage />
</Route>
<Route exact path="/">
<InicioPage />
</Route>
<Route path="*">
<NotFoundPage />
</Route>
</Switch>
</Router>
)
}