Ad

React Router Multiple Params Doesn't Work

I want from path="/users/:login/:repo" to view login's repo detail page but it doesn't work and views UserProfile component. Here is the click:

 <Link to={this.props.location.pathname+'/'+item.name}>
   <div>
      <h4>{item.name}</h4>
      <p>{item.description} </p>
   </div>
 </Link>


<Switch>
    <Route exact path="/" component={Contributors}/>
    <Route  path="/users/:login" component={UserProfile}/>
    <Route  path="/users/:login/:repo" component={RepoPage}/>
</Switch>
Ad

Answer

You need to reverse the ordering of your routes, since Switch matches the first route

<Switch>
    <Route exact path="/" component={Contributors}/>
    <Route  path="/users/:login/:repo" component={RepoPage}/>
    <Route  path="/users/:login" component={UserProfile}/>
</Switch>

With React-router the paths that are prefixes to the exactly matching path are also matched and hence "/users/:login/:repo" also matches "/users/:login", and since you are using switch, RepoPage is getting rendered and not other Routes defined after this are getting checked.

Ad
source: stackoverflow.com
Ad