Маршрут с /: идентификатором пользователя прерывает другой путь

#reactjs #react-router-dom

#reactjs #реагировать-маршрутизатор-dom

Вопрос:

У меня проблема с маршрутом.

У меня есть этот код:

 <Switch>
 <Route path="/Register" component={Register} />
 <Route path="/:userId" component={UserProfile} />
 <Route path="/direct/inbox" component={Messenger} />
  

И в компоненте (UserProfile) я использую useParams для отслеживания идентификатора пользователя, но моя проблема в том, что когда я попытался перейти в / direct / inbox, он отображал компонент UserProfile (и, конечно, выдавал мне ошибку).

Итак, мой вопрос в том, как я могу отобразить другой путь при использовании :userId???

*** Кстати, у пути регистра нет никаких проблем с этим, он работает нормально.

Комментарии:

1. Я думаю, вам нужно поместить :userId маршрут внизу после /direct/inbox маршрута

2. Это тоже работает .. не знал этого, спасибо

Ответ №1:

Неважно, я решаю это… Я добавил ‘exact’ в путь к идентификатору пользователя. Если у кого-то есть другое решение, я не буду возражать попробовать его.

 <Switch>
<Route path="/Register" component={Register} />
<Route exact path="/:userId" component={UserProfile} />
<Route path="/direct/inbox" component={Messenger} />
  

Ответ №2:

Использование exact не решит проблему, потому что, если путь есть, /direct/inbox тогда он будет совпадать exact path="/:userId" . Итак, что мы можем сделать, это создать <Route path="/:userId" component={UserProfile} /> последний маршрут. Поэтому, когда путь сопоставляется для /direct/inbox , он будет совпадать с ожидаемым маршрутом, и соответствующий компонент будет отображен.