Tengo un proyecto create-react-app con react-router-dom v6 instalado. Intentando usar la nueva sintaxis de ruta de índice para que mi componente de página de inicio se represente en el índice que actualmente está sirviendo a un componente de diseño. Cuando navego al índice (http://localhost:3000/), representa el componente Diseño con el nombre del sitio en un componente pero no la página de inicio (la "Página de inicio" no se representa).
¡Gracias por la ayuda!
Código a continuación:
Aplicación.js
import './App.css'; import {Routes, Route, Outlet, Link, BrowserRouter as Router} from "react-router-dom"; import Layout from "./components/layout/Layout"; import HomePage from "./pages/Home"; function App() { return ( <div className="App"> <Router> <Routes> <Route path="/" element={<Layout />}> <Route index element={<HomePage />} /> </Route> </Routes> </Router> <Outlet /> </div> ); } export default App;Inicio.js
const HomePage = () => { return ( <div> <h1>Home Page</h1> </div> ) } export default HomePageDiseño.js
import data from "../../config/siteconfig.json" const settings = data.settings; const Layout = ({children}) => { return ( <div> <h1>{settings.sitename}</h1> {children} </div> ) } export default LayoutSi desea que los componentes de Route anidados se representen, el componente de Layout debe representar un Outlet para que se representen. El uso de accesorios para children sería si Layout estuviera envolviendo directamente los componentes de los niños.
En otras palabras, es la diferencia entre
<Route path="/" element={( <Layout> <HomePage /> // <-- rendered as children </Layout> )} />y
<Route path="/" element={<Layout />}> <Route index element={<HomePage />} /> // <-- rendered as nested route </Route>Actualización de código sugerida:
import { Outlet } from 'react-router-dom'; const Layout = ({children}) => { return ( <div> <h1>{settings.sitename}</h1> <Outlet /> </div> ); };...
function App() { return ( <div className="App"> <Router> <Routes> <Route path="/" element={<Layout />}> <Route index element={<HomePage />} /> </Route> </Routes> </Router> </div> ); }