Cuando hago clic en el botón Agregar tarjeta (componente IconButton), debería poder navegar a la página Agregar tarjeta, pero no funciona.
Este es mi código:
Aplicación.js:
<Routes> <Route index element={<Home />} /> <Route path="login" element={<Login />} /> <Route path="signup" element={<Signup />} /> <Route path="manage-cards" element={<ManageCards />}> <Route path="add-card" element={<h1>Hello world</h1>} /> </Route> <Route path="manage-code" element={<ManageCode />} /> </Routes>Administrar tarjetas.jsx:
import React from "react"; import { Link } from "react-router-dom"; import IconButton from "../../components/iconButton/IconButton"; import addCardIcon from "../../assets/img/Add card.png"; const ManageCards = () => { return ( <div className="manage-cards"> <div className="manage-cards__buttons"> <Link to="add-card"> <IconButton icon={addCardIcon} altText="Add card" iconText="Add card" /> </Link> </div> </div> ); }; export default ManageCards;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.
¿Agregaste Outlet ?
úsalo
import React from "react"; import { Link,Outlet } from "react-router-dom"; import IconButton from "../../components/iconButton/IconButton"; import addCardIcon from "../../assets/img/Add card.png"; const ManageCards = () => { return ( <div className="manage-cards"> <div className="manage-cards__buttons"> <Link to="add-card"> <IconButton icon={addCardIcon} altText="Add card" iconText="Add card" /> </Link> </div> <Outlet /> </div> ); }; export default ManageCards;Quería mostrar la tarjeta adicional en una página diferente, el problema con Outlet hará que se muestre en la misma página. Así es como logré solucionar el problema:
<Routes> <Route index element={<Home />} /> <Route path="login" element={<Login />} /> <Route path="signup" element={<Signup />} /> <Route path="manage-cards"> <Route index element={<ManageCards />} /> <Route path="add-card" element={<h1>Hello world</h1>} /> </Route> <Route path="manage-code" element={<ManageCode />} /> </Routes>