React Router несколько параметров не работает

Question

Я хочу с path="/users/:login/:repo" просмотреть страницу с подробностями репо входа в систему, но она не работает и просматривает компонент UserProfile. Вот клик:

 <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>

Answer 1

Вам необходимо изменить порядок ваших маршрутов, поскольку Switch соответствует первому маршруту

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

С React-router пути, которые являются префиксами к точно совпадающему пути, также совпадают, и, следовательно, "/users/:login/:repo" также соответствует "/users/:login", и, поскольку вы используете switch, RepoPage обрабатывается, а другие маршруты, определенные после этого, получать проверено.

Answer 2

Любой URL, соответствующий "/users/:login/:repo", будет также соответствовать "/users/:login", если вы не используете квалификатор exact.

В контексте Switch это означает, что UserProfile будет отображаться каждый раз, потому что он стоит первым.

Решение было бы изменить:

<Route  path="/users/:login" component={UserProfile}/>

до

<Route exact path="/users/:login" component={UserProfile}/>