When I click Add card button (IconButton component) I should be able to navigate to the Add card page but it doesn't work.
This is my code:
App.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>
ManageCards.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;
An <Outlet> should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.
Did you add Outlet ?
Use it
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;
I wanted to render the add-card in a different page, the problem with Outlet will cause it to render in the same page. So that's how I managed to fix the issue:
<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>