react router 4 ambiguous match within same level of path

Question

what is the best way i can render the correct compoment with those ambiguous path, currently it always fall in the the first match no matter what value has been pass.

<Switch>
    <Route exact path={"/:vehicleclass/:categoryname/"} render={({ match, history }) => <Make history={history} match={match} {...props}/>} />
    <Route exact path={"/:vehicleclass/:manufacturername/"} render={({ match, history }) => <Year history={history} match={match} {...props}/>} />
    <Route exact path={"/:vehicleclass/:categoryname/:manufacturername/"} render={({ match, history }) => <Year history={history} match={match} {...props}/>} />
    <Route exact path={"/:vehicleclass/:manufacturername/:year/"} render={({ match, history }) => <Model history={history} match={match} {...props}/>} />
    <Route exact path={"/:vehicleclass/:year/:manufacturername/:model/"} render={({ match, history }) => <Value history={history} match={match} {...props}/>} />   </Switch>

You cannot distinguish between the two paths `/:vehicleclass/:categoryname/` and `/:vehicleclass/:manufacturername/` because whatever you pass ccan be tread as categoryname. What you need is to use queryParams in your case and also have prefix paths later in the order. Another way you can solve this is to use it like `/:vehicleclass/manufacture/:manufacturername/` and `/:vehicleclass/category/:categoryname/`, that way it will be treated differently by router — Shubham Khatri, Oct 26 '18 at 08:11

score 0 · Answer 1 · answered Oct 26 '18 at 09:19

If I type the following path /sedan/foo the router will match only the first one as it has no way of knowing if what you type is a category name or a manufacturer name. (you have no exact path of sedan so it will think it's an option and will match the very first one with an option)

/:vehicleclass/:categoryname/ == /:vehicleclass/:manufacturername/ because it sees it as /option1/option2

You need to think about it as category/:categoryname/vehicleclass/:vehicleclass so /category/option1/vehicleclass/option2 works

score 0 · Answer 2 · answered Oct 26 '18 at 09:22

You should refer to rest conventions for this type of use case for designing your url path in frontend:

example:

for the last one, year should be passed with query parameter like: :vehicleclass/manufacturer/:manufacturername/model/:model?year=2009

<Switch>
  <Route
    exact
    path={"/:vehicleclass/category/:categoryname/"}
    render={({ match, history }) => (
      <Make history={history} match={match} {...props} />
    )}
  />
  <Route
    exact
    path={"/:vehicleclass/manufacturer/:manufacturername/"}
    render={({ match, history }) => (
      <Year history={history} match={match} {...props} />
    )}
  />
  <Route
    exact
    path={
      "/:vehicleclass/category/:categoryname/manufacturer/:manufacturername/"
    }
    render={({ match, history }) => (
      <Year history={history} match={match} {...props} />
    )}
  />
  <Route
    exact
    path={"/:vehicleclass/manufacturer/:manufacturername/:year/"}
    render={({ match, history }) => (
      <Model history={history} match={match} {...props} />
    )}
  />
  <Route
    exact
    path={"/:vehicleclass/manufacturer/:manufacturername/model/:model"} 
    render={({ match, history }) => (
      <Value history={history} match={match} {...props} />
    )}
  />
</Switch>;

react router 4 ambiguous match within same level of path

2 Answers2