Soy nuevo en aprender React, así que me pregunto si alguien puede ayudarme. Actualmente estoy construyendo una cartera a través de React y estoy trabajando en Nav para esto. No recibo ningún error en la consola y cuando hago clic en cada enlace, muestra el enlace en el que hice clic en la URL, pero no me muestra nada de mi contenido de cada enlace. ¿Alguien puede ayudarme a explicar dónde me estoy equivocando?
Código de aplicación
import React from 'react'; import { BrowserRouter, Route, Link } from 'react-router-dom'; import Projects from './Projects.js'; import Contact from './Contact.js'; import About from './About.js'; import Skills from './Skills.js'; import Home from './App.js'; import './App.css'; function App() { return ( <BrowserRouter> <div className="App"> <Route path="/" element={<Home />}></Route> <Route path="/about" element={<About />}></Route> <Route path="/contact" element={<Contact />}></Route> <Route path="/projects" element={<Projects />}></Route> <Route path="/skills" element={<Skills />}></Route> <div className="navigation"> <div className="navigation-sub"> <Link to="/" className="item">Home</Link> <Link to="/about" className="item">About</Link> <Link to="/contact" className="item">Contact</Link> <Link to="/projects" className="item">Projects</Link> <Link to="/skills" className="item">Skills</Link> </div> </div> </div> </BrowserRouter> ); } export default App;código de índice
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById("root") ); reportWebVitals();Acerca del código
import React from "react"; function About(props) { return ( <div> <h1>About Me</h1> </div> ) } export default About;Gracias :)
Ya está renderizando un BrowserRouter alrededor de la App , así que elimine el BrowserRouter extraño de la App . Los componentes Route también faltan envueltos en un componente de Routes que maneja la coincidencia de ruta. Es un componente requerido. Debería tener algunos errores de consola advirtiendo sobre infracciones invariantes para la representación de un enrutador dentro de otro enrutador y las rutas no están envueltas directamente por un componente de Routes .
import { Routes, Route } from 'react-router-dom'; function App() { return ( <div className="App"> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> <Route path="/projects" element={<Projects />} /> <Route path="/skills" element={<Skills />} /> </Routes> <div className="navigation"> <div className="navigation-sub"> <Link to="/" className="item">Home</Link> <Link to="/about" className="item">About</Link> <Link to="/contact" className="item">Contact</Link> <Link to="/projects" className="item">Projects</Link> <Link to="/skills" className="item">Skills</Link> </div> </div> </div> ); }