My current challenge involves setting up dynamic routing in my application to enable the viewing of products from different stores. Essentially, I am developing an app where users can add stores and browse through their items. I have implemented a dynamic route for the items component, allowing me to access each store's ID in the params and display the corresponding items. However, I encountered an issue where although I was able to retrieve the values in the component, the HTML content was not rendering, resulting in a blank page.
Below is the code snippet where I defined the route:
import React from "react";
import { Routes, Route } from "react-router-dom";
import StoresPreview from "../../components/StoresPreview/StoresPreview";
import ItemsMap from "../../components/Items/ItemsMap";
const StoresPage = () => {
return (
<>
<Routes>
<Route index element={<StoresPreview />} />
<Route path=":number" element={<ItemsMap />} />
</Routes>
</>
);
};
export default StoresPage;
Here is the component structure for the items map:
import React from "react";
import { useParams } from "react-router-dom";
const ItemsMap = () => {
const { number } = useParams();
console.log(number);
return (
<div>
<h1>{`the id is ${number}`}</h1>
</div>
);
};
export default ItemsMap;
And this is how the main app component is set up:
import React from "react";
import { Routes, Route } from "react-router-dom";
import Navbar from "./components/NavbarWithDrawer/NavBar";
import HomePage from "./components/Home/Home";
import AdminSignIn from "./components/AdminSignIn/AdminSignIn";
import StoresPage from "./pages/StoresPage/StoresPage";
const App = () => {
return (
<>
<Routes>
<Route path="/" element={<Navbar />}>
<Route index element={<HomePage />} />
<Route path="stores/*" element={<StoresPage />} />
<Route path="signin" element={<AdminSignIn />} />
</Route>
</Routes>
</>
);
};
export default App;
Despite attempting to add an outlet to StoresPreview in hopes of rendering the ItemsMap HTML, it did not yield the desired outcome.