Índice.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { BrowserRouter as Router } from 'react-router-dom'; ReactDOM.render( <React.StrictMode> <Router> <App /> </Router> </React.StrictMode>, document.getElementById('root') );Aplicación.js
import React from 'react'; import { Routes, Route } from "react-router-dom"; import Main from './Pages/Home/Main.js'; import NotFound from './Helpers/NotFound.js'; function App() { return ( <div className="app-routes"> <Routes> <Route path="/"> <Main /> </Route> <Route> <NotFound /> </Route> </Routes> </div> ); } export default App;Principal.js
import React from 'react'; import './main.css'; function Main(){ return ( <div className="main-content"> <h1>This is the Main Page</h1> </div> ); } export default Main;Definitivamente no es un problema de importación de componentes probado sin rutas y funciona perfectamente, pero cuando agrego rutas o incluso solo enruto por sí mismo, nada se renderizará. tengo react-router-dom v.6 instalado
La API de React-router v6 ha cambiado. necesita usar elemento prop para representar un componente.
<Routes> <Route path="/" element={<Main>} /> <Route path="/custom" element={<div>custom</div>} /> <Route path="*" element={<NotFound />}> </Routes>react-router-dom@6 usa la propiedad del elemento en la ruta para mostrar el componente
Para mostrar la página no encontrada, use la ruta = "*" y agréguela al final de todas las rutas, de modo que cada vez que las rutas no coincidan, vaya a la página no encontrada (404).
<Routes> <Route path="/" element={<Main />}/> //all your routes here <Route path="*" element={ <NotFound />}/> //in the last </Routes>