How can I make the URL dynamic according to categories?

October 9, 2022

I’m creating a sidebar categories, wherein the users have choices to pick which categories he/she will pick.

The problem I’m encountering here is after clicking another another category, it adds in the url .

But after I click another button/category, this is what happen, example I click the gadget one more time. It appends on the url. How can I prevent this?

Clicking Gadget one more time

Sidebar.js

 <Box p={4} sx={{display: 'flex', alignItems:'center', justifyContent: 'center', gap: '10px'}}>
      <>
        {itemTables.map((item, i) => (
          <Link  key={item.name} style={{textDecoration: 'none'}} to={`products/${item.cat}`}>
            <Button variant="outlined">{item.name}</Button>
          </Link>
        ))}
      </>
   </Box>

ItemTables.js

export const itemTables =[
    {
        id: '1',
        name: "Comscie / IT Equipment",
        cat: 'gadgets'
    },
    {
        id: '2',
        name: "Nursing / Medication",
        cat: 'women'
    },
    {
        id: '3',
        name: 'Tourism / Clothes',
        cat: 'gadgets'
    },
    {
        id: '4',
        name: 'Health & Personal Care',
        cat: 'health'
    },

]

App.js

return(
  <BrowserRouter>
  <Routes>
    <Route exact path="/"  element={ <Home />} />


    {/* Auth */}
    <Route path="/register" element={ <Register />} />
    <Route index path="/login" element={ <Login />} />


    {/* Product */}
    <Route  path="/products/:category"  element={ <Home />} />
    <Route path="/sell" element={ <Sell  />} />
    <Route path="/myproducts/" element={ <MyProducts /> } />
    <Route path="/singleproduct/:id" element={<SingleProduct />} />
    <Route path="/editproduct/:id" element={<EditProduct />} />

  </Routes>
  <ToastContainer />
</BrowserRouter>
 )

>Solution :

<Link key={item.name} style={{textDecoration: 'none'}} to={`/products/${item.cat}`}>

This will help you because when you use products/${item.cat}, it will add the link just beside the previous link in the URL bar not replacing the link.