Aplicación.js
import React, {Component} from 'react'; import './App.css'; import About from './about'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; class App extends Component { render() { return ( <Router> <div className='App'> <Route path="/abou" component={About} /> </div> </Router> ); } } export default App;acerca de.js
import React from 'react' const about = () => { return ( <div>about</div> ) } export default aboutpaquete.json
{ "name": "react-router", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿Duda????????????????????????????????????????????????? ??????????????????????????????
Instalé react-router-dom como puede ver en el archivo package.json pero, aunque se está compilando correctamente, no puedo ver nada. ¿Cuál podría ser el error, por favor hágamelo saber?
El componente Ruta debe ser un elemento secundario del componente Rutas y en el componente Ruta debe usar el elemento de propiedad para especificar el componente que se representará en lugar del componente de propiedad.
import React, {Component} from 'react'; import './App.css'; import About from './About'; import Home from './Home'; import { BrowserRouter as Router, Route, Routes} from 'react-router-dom'; class App extends Component { render() { return ( <Router> <div className='App'> <Routes> <Route path="/about" element={<About />} /> <Route path="/" element={<Home />} /> </Routes> </div> </Router> ); } } export default App;Noté que tiene confusión entre react-router v5 y v6 (usted está usando v6) Entonces, para obtener más información sobre react-router v6, visite el sitio web oficial de documentación de react-router: https://reactrouter.com/docs/en/v6