El componente no se monta cuando hago clic en la acción en el encabezado de la aplicación de reacción, pero el cambio de URI funciona bien.
Estoy usando
"react": "^18.0.0", "react-dom": "^18.0.0", "react-router-dom": "^6.3.0"y mi codigo es
Encabezado.js
import { BrowserRouter as Router, Link } from "react-router-dom"; const Header= () => { return ( <nav className="navbar"> <Router> <ul className="navbar-items"> <li className="navbar-items_item"> <Link to="/">Home</Link> </li> <li className="navbar-items_item"> <Link to="/about">About</Link> </li> <li className="navbar-items_item"> <Link to="/user">User</Link> </li> </ul> </Router> </nav> ); }; export default Header;Aplicación.js
import React, { Component } from "react"; import { BrowserRouter as Router, Routes, Route, Navigate, } from "react-router-dom"; import Header from "./components/Header/index"; import Footer from "./components/Footer/index"; import "../styles/style.scss"; const Home = () => <div>Home</div>; const About = () => <div>About</div>; const User = () => <div>User</div>; class App extends Component { render() { return ( <div className="App"> <header> <Header /> </header> <main> <Router> <Routes> <Route exact path="/" element={<Home />} /> <Route exact path="/about" element={<About />} /> <Route exact path="/user" element={<User />} /> </Routes> </Router> </main> <footer> <Footer /> </footer> </div> ); } } export default App;También incluí el encabezado para envolver la etiqueta del enrutador .
Encabezado.js
import { Link } from "react-router-dom"; const Header= () => { return ( <nav className="navbar"> <ul className="navbar-items"> <li className="navbar-items_item"> <Link to="/">Home</Link> </li> <li className="navbar-items_item"> <Link to="/about">About</Link> </li> <li className="navbar-items_item"> <Link to="/user">User</Link> </li> </ul> </nav> ); }; export default Header;Aplicación.js
import React, { Component } from "react"; import { Routes, Route } from "react-router-dom"; import Header from "./components/Header/index"; import Footer from "./components/Footer/index"; import "../styles/style.scss"; const Home = () => <div>Home</div>; const About = () => <div>About</div>; const User = () => <div>User</div>; class App extends Component { render() { return ( <div className="App"> <header> <Header /> </header> <main> <Routes> <Route exact path="/" element={<Home />} /> <Route exact path="/about" element={<About />} /> <Route exact path="/user" element={<User />} /> </Routes> </main> <footer> <Footer /> </footer> </div> ); } } export default App;índice.js
import { BrowserRouter as Router } from "react-router-dom"; import ReactDOM from "react-dom/client"; import App from "./modules/App"; import reportWebVitals from "./reportWebVitals"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <Router> <App /> </Router> </React.StrictMode> ); reportWebVitals();