How to specify react-router-dom routes in order for matching?

Question

I use react with following dependencies with the specified versions

{
  "react-router-dom": "^5.2.0",
  "react-dom": "^16.14.0",
}

and I want to have a route like this

Home
About
Home/Test
Home/Test/New <== this is my problem

I have

<BrowserRouter>
    <Switch>
        <PublicRoute  component={Login} path="/" exact />
        <PublicRoute  component={Login} path="/login" exact />
        <PrivateRoute component={Dashboard} path="/dashboard"/>
        <Route to="/404" component={NotFound} />
    </Switch>
</BrowserRouter>

On the dashboard I have this

<Router>
    <Navbar />
    <Switch>
        <Route path={`/dashboard/buyList`} component={BuyList} />
        <Route exact path='/dashboard/buyList/new' component={NewBuy} />
        <Route path={`/dashboard/buyList${ids.id}`} component={BuyInfo}/>
        <Route path='/dashboard/showAddress' component={ShowAddress} exact/>
        <Route path='/dashboard/qrScanner' component={QrScanner} exact/>
        <Route path='/dashboard/productList' component={ProductList} exact/>
        <Route path='/dashboard/productListCode' component={ProductListCode} exact/>
        <Route path='/dashboard/deliveryScanner' component={DeliveryScanner} exact/>
        <Route path='/dashboard' component={DashboardDetail} exact/>
        <Route path="/404" component={NotFound} />
    </Switch>
</Router>

but in "/dashboard/buyList/new" is loading the component of "/dashboard/buyList"

score 1 · Answer 1 · answered Nov 13 '21 at 06:32

1

You can add the exact param to /dashboard/buyList

<Switch>
    <Route path= '/dashboard/buyList' component={BuyList} exact />
    <Route exact path='/dashboard/buyList/new' component={NewBuy} />
    //other routes
<Switch>

answered Nov 13 '21 at 06:32

Rifky Niyas

1,737
10
25

score 1 · Answer 2 · answered Nov 13 '21 at 06:43

Issues

You need only one router, so remove the nested Router around the dashboard routes.
Adding the exact prop everywhere isn't a magic bullet. It won't necessarily solve your problem correctly here. The Switch component only renders the first match it finds, even if the one you really want to match and render is later in the "list". In this case "/dashboard/buyList" is less specific than "/dashboard/buyList/new" but because it's a prefix to the actual path "/dashboard/buyList/new" it is matched and rendered.

Solution

Remove the extraneous Router. Ensure you've specified the route paths from most specific to least specific. If ordered correctly there is absolutely no need for the exact prop.

"/dashboard/buyList/new" is more specific than "/dashboard/buyList${ids.id}" is more specific than "/dashboard/buyList", etc..

Also, remove the path prop from the 404 route so it can also be correctly matched and rendered in the case that no other routes above it match.

<Navbar />
<Switch>
  <Route path='/dashboard/buyList/new' component={NewBuy} />
  <Route path={`/dashboard/buyList${ids.id}`} component={BuyInfo} />
  <Route path='/dashboard/buyList' component={BuyList} />
  <Route path='/dashboard/showAddress' component={ShowAddress} />
  <Route path='/dashboard/qrScanner' component={QrScanner} />
  <Route path='/dashboard/productList' component={ProductList} />
  <Route path='/dashboard/productListCode' component={ProductListCode} />
  <Route path='/dashboard/deliveryScanner' component={DeliveryScanner} />
  <Route path='/dashboard' component={DashboardDetail} />
  <Route component={NotFound} />
</Switch>

How to specify react-router-dom routes in order for matching?

2 Answers2

Issues

Solution