Tengo una barra de navegación que se representa en cada ruta mientras la ruta cambia al hacer clic.
./components/navbar.jsx
import React, { Component } from 'react'; import '../App.css'; import { Link } from 'react-router-dom'; class Navbar extends Component { constructor(props) { super(props); this.state = {}; } render() { return ( <div id = 'navbar'> <div className='name-head'> My Name </div> <div id = 'nav-links-container'> <Link to='/experiences'> <div className = 'nav-links'> Experiences </div> </Link> <div className = 'nav-links'> Projects </div> <div className = 'nav-links'> Skills </div> <div className = 'nav-links'> Resume </div> </div> </div> ); } } export default Navbar;./componentes/experiencias.jsx
import React, { Component } from 'react'; class Experiences extends Component { render() { return ( <div> <h1>hi</h1> </div> ); } } export default Experiences;índice.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; import Navbar from './components/Navbar'; import Home from './components/Home'; import Experiences from './components/experience'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; ReactDOM.render( <React.StrictMode> <Navbar /> <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/experiences" element={<Experiences />} /> </Routes> </Router> </React.StrictMode>, document.getElementById('root') ); reportWebVitals(); El error no aparece cuando elimino <Link> de la etiqueta de experiencias en la barra de navegación. Hay una pregunta similar publicada aquí: Error: useHref() puede usarse solo en el contexto de un componente <Router> pero no ayuda.
estoy usando reaccionar enrutador v6
Está representando la barra de navegación fuera del contexto de enrutamiento. El Router no sabe a qué rutas intentan conectarse los enlaces que está administrando. La razón por la que el enrutamiento funciona cuando se navega directamente a "/experiences" es porque el Router reconoce la URL cuando se monta la aplicación.
<Navbar /> // <-- outside router!! <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/experiences" element={<Experiences />} /> </Routes> </Router> Muévalo dentro del contexto de enrutamiento para que el Router sea consciente y pueda administrar el enrutamiento correctamente.
<Router> <Navbar /> <Routes> <Route path="/" element={<Home />} /> <Route path="/experiences" element={<Experiences />} /> </Routes> </Router>Si aún tiene problemas con este, es porque react-router-dom se basa en el contexto de React para funcionar cuando intente realizar una prueba unitaria. Esto hace que <Link /> o <Route /> queden obsoletos.
Intente leer la documentación react-router-dom .
En lugar de usar
render(<Example />)que tienen o en él, puedes probar
render(<MemoryRouter> <Example /> </MemoryRouter>)Espero que esto resuelva tu problema
Los enlaces están dentro de la barra de navegación y la barra de navegación está fuera del enrutador => los enlaces están fuera del enrutador => el enrutador no administrará los enlaces
Solución
Mueva la barra de navegación a la sección del enrutador. Ejemplo:
<Router> <Navbar /> // <=========== <Routes> <Route /> <Route /> </Routes> </Router>