0
278
VistasAunque todo está bien, React Router no funciona
Quiero vincular páginas usando React Reuters pero, que yo sepa, todo está bien, pero ninguno de los componentes funciona correctamente.
َApp.js
import React from "react"; import MatherComponent from "./components/MatherComponent"; import AboutMe from "./components/AboutMe"; import NoPage from "./components/NoPage"; import Layout from "./components/Layout"; import { BrowserRouter, Route , Routes } from "react-router-dom"; function App() { return ( <> <BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route index element={<MatherComponent />} /> <Route path="about" element={<AboutMe />} /> <Route path="*" element={<NoPage />} /> </Route> </Routes> </BrowserRouter> </> ); } export default App;Diseño
import React from "react"; import { Link } from "react-router-dom"; function Layout() { return ( <> <header className="row" style={{ padding: "10px", backgroundColor: '#ffc107', display: 'flex', marginLeft: "0px", marginRight: "0px" }}> <div style={{ display: 'flex' }} className="col col-4"> <img src="https://img.icons8.com/doodle/48/000000/apple-weather.png" alt="" /> <div style={{ marginRight: "10px", paddingTop: "10px" }}>آب و هوای امروز</div> </div> <div className="col col-4"> <button style={{ float: "left" }} className="btn"> <img alt="" src="https://img.icons8.com/external-those-icons-lineal-color-those-icons/48/000000/external-thermometer-weather-those-icons-lineal-color-those-icons.png" /> </button> </div> <div className="col col-4"> <Link to="/about">About Me</Link> </div> </header> </> ); } export default Layout;Es decir, solo muestra el diseño y no muestra los otros componentes.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Al componente de Layout le falta una Outlet para que se representen los componentes de Route anidados.
Se debe usar un
<Outlet>en los elementos de ruta principales para representar sus elementos de ruta secundarios. Esto permite que la interfaz de usuario anidada se muestre cuando se representan las rutas secundarias. Si la ruta principal coincide exactamente, generará una ruta de índice secundaria o nada si no hay una ruta de índice.
import { Link, Outlet } from "react-router-dom"; function Layout() { return ( <> <header className="row" style={{ padding: "10px", backgroundColor: '#ffc107', display: 'flex', marginLeft: "0px", marginRight: "0px" }}> <div style={{ display: 'flex' }} className="col col-4"> <img src="https://img.icons8.com/doodle/48/000000/apple-weather.png" alt="" /> <div style={{ marginRight: "10px", paddingTop: "10px" }}>آب و هوای امروز</div> </div> <div className="col col-4"> <button style={{ float: "left" }} className="btn"> <img alt="" src="https://img.icons8.com/external-those-icons-lineal-color-those-icons/48/000000/external-thermometer-weather-those-icons-lineal-color-those-icons.png" /> </button> </div> <div className="col col-4"> <Link to="/about">About Me</Link> </div> </header> <Outlet /> // <-- nested routes render here </> ); } 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta