reactjs - React-router not redirecting to page

Question

I got problem while using react-router

<Switch>
                    <Route path="/" exact >
                         HOME 
                    </Route>

                    <Route path="/cart"  >
                        <Cart />
                    </Route>

                    <Route path="/shop/category=:category">
                        <ShoppingList />
                    </Route>

                    <Route path="/shop/category=:category/product=:title"  >
                        <ProductInfo />
                    </Route>
 </Switch>

As long as redirect to /shop/category=:category works for me, redirect to /shop/category=:category/product=:title doesn't shows component ProductInfo. My Link set window.location.pathname to for example: /shop/category=Water%20sports/product=Fins

Where the problem could be?

---

My Link is in another file, and i wrote it just

const productLink = "/shop/category="+Item.category+"/product="+Item.title;
...
<Link to={productLink} >

question from:https://stackoverflow.com/questions/65929279/react-router-not-redirecting-to-page

Answer 1

The problem is the order of your Routes. React router is designed so that it send the user to the first route that matches their current path, not the most specific one.

When you have a path which is a subset of another path, like category/product is to category, you need to list the more specific one first. Otherwise all category/product pages will match to the category.

<Switch>
    <Route path="/" exact >
          HOME 
    </Route>

    <Route path="/cart"  >
        <Cart />
    </Route>

    <Route path="/shop/category=:category/product=:title"  >
        <ProductInfo />
    </Route>

    <Route path="/shop/category=:category">
        <ShoppingList />
    </Route>
 </Switch>