Parece que no puedo entender por qué las rutas de mi enrutador no se están procesando. Estoy en el comienzo de la construcción de mi aplicación, por lo que no hay mucho código y probé varios métodos diferentes y todavía nada. Solo tengo div en este momento en los componentes que estoy tratando de enrutar y el texto interno no aparece; estaban funcionando cuando solo tenía los componentes en mi archivo App.js antes de intentar enrutarlos. ¿Algunas ideas?
import React from 'react'; import './App.css'; import { BrowserRouter as Router, Routes, Route} from 'react- router-dom' import Main from './components/Main'; import AddUser from './components/AddUser'; import EditUser from './components/EditUser'; function App() { return ( <div className="App"> <header className="App-header"> <h1>Home</h1> </header> <Router> <Routes> <Route exact path="/" component={Main} /> <Route path="/AddUser" component={AddUser} /> <Route path="/edit" component={EditUser} /> </Routes> </Router> </div> ); } export default App;// Mi archivo JSON \
{ "name": "w15-crud", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", "@testing-library/user-event": "^13.5.0", "bootstrap": "^5.1.3", "react": "^18.1.0", "react-dom": "^18.1.0", "react-router": "^6.3.0", "react-router-dom": "^6.3.0", "react-scripts": "^2.1.3", "reactstrap": "^9.0.2", "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" ] } }La API del componente de Route react-router-dom@6 cambió. Ya no hay un accesorio de component para renderizar componentes enrutados. Use el element prop y pase un ReactNode, también conocido como JSX.
Ver Rutas y Ruta
declare function Route( props: RouteProps ): React.ReactElement | null; interface RouteProps { caseSensitive?: boolean; children?: React.ReactNode; element?: React.ReactNode | null; index?: boolean; path?: string; }
Ejemplo:
<Router> <Routes> <Route path="/" element={<Main />} /> <Route path="/AddUser" element={<AddUser />} /> <Route path="/edit" element={<EditUser />} /> </Routes> </Router>