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 qué rutas están tratando de vincular 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>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
<Router> <Navbar /> // <=========== <Routes> <Route /> <Route /> </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. Intenta leer la documentación de react-router-dom en este enlace
En lugar de usar
render(<Example />)que tienen o en él, puedes probar
render(<MemoryRouter> <Example /> </MemoryRouter>)Espero que esto resuelva tu problema
en React Route v6 puede resolver esto dando el contexto de la ruta a toda su aplicación con < BrowserRouter >
Este es un ejemplo completo de index.js
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { App } from './components/App/App.jsx'; ReactDOM.render( <React.StrictMode> <BrowserRouter> //that is the key <App /> </BrowserRouter> </React.StrictMode>, document.getElementById('root') );