NOTE:: this is a scenario that i’m describing here as i need same in real app. in my actual app, i need 3 or 4 level nested routing. i’m using index because when i’ll visit the tab list1, url would be /profile and list1 should be there by default and list1 should render productList as its child.
if i go to list2 tab, url will /profile/list2/items and list2 should render with productList and same for list3.
if i go to list3 tab, url will /profile/list3/items and list3 should render with productList.
productList is rendering a Product component. by clicking on that component, a modal will be open along with ProductDetails component.
And wheneven i click on Product modal will be open with ProductDetails component. and then url will be localhost://5173/product/productId
this is the same stuff as if we visit profile page on instagram.
i hove you people can understand the scenario i want to create.
export default function App() {
return (
<div className="App">
<h3 className="text-red-500 font-bold">App</h3>
<Routes>
<Route path="/" element={<Home />} />
<Route path="profile" element={<Profile />}>
<Route index element={<List1 />}>
<Route path="/profile/list1/items" element={<ProductList />} />
</Route>
<Route index path="list2" element={<List2 />}>
<Route path="/profile/list2/items" element={<ProductList />} />
</Route>
<Route index path="list3" element={<List2 />}>
<Route path="/profile/list3/items" element={<ProductList />} />
</Route>
</Route>
</Routes>
</div>
);
}
export default function ProductList() {
return (
<ul className="flex items-center gap-x-3 *:cursor-pointer">
{products.map((product) => (
<Product key={product.id} item={product} />
))}
</ul>
);
}
export default function Product({ item }) {
const navigate = useNavigate();
return (
<ModalProvider>
<Modal.Open opens="product-details">
<div className="w-52 h-52 border border-blue-400 flex items-center justify-center">
{item?.name}
</div>
</Modal.Open>
<Modal.Window name="product-details">
<ProductDetails />
</Modal.Window>
</ModalProvider>
);
}
export default function ProductDetails() {
return (
<div className="border flex-col border-blue-400 w-52 h-32 flex items-center justify-center">
<h2>Name: {product.name}</h2>
<h3>Category: {product.category}</h3>
<h4>Price: {product.price}</h4>
</div>
);
}
here is accessible link to sandbox for demo project;
i’ve visited react-router-dom docs, go through some articles even visited stackoverflow previous questions but didn’t found any solution to my problem