Блог

Главная - Вопросы по программированию - Реагирующий маршрутизатор: Как обрабатывать завершающий / в match.url при создании ссылок?

Реагирующий маршрутизатор: Как обрабатывать завершающий / в match.url при создании ссылок?

#reactjs #react-router #react-router-v4 #react-router-dom #react-routing

#reactjs #react-router #react-router-v4 #react-router-dom #реагировать-маршрутизация

Вопрос:

Я создавал ссылки в своем приложении React (используя react-router-dom 4.3.1), используя код, подобный следующему:

 const { match } = this.props;
...
pages.map(page =>
    <Link to={match.url '/' page.id() '/info'}>
        Go to info page for {page.title()}
    </Link>)

поскольку это, по-видимому, рекомендуемая практика (например, см. ${match.url}/components https://reacttraining.com/react-router/web/guides/quick-start/example-nested-routing ).

Проблема, с которой я сталкиваюсь:

Если я нахожусь на следующем пути:

 /app/home

ссылки, сгенерированные выше, соответствуют ожиданиям:

  • /app/home/1/info
  • /app/home/2/info
  • /app/home/3/info
  • и т.д.

Но если я загружу этот (немного другой) путь (обратите внимание на завершающий /):

 /app/home/

тогда сгенерированные ссылки неверны (обратите внимание на double / after home):

  • /app/home//1/info
  • /app/home//2/info
  • /app/home//3/info
  • и т.д.

Другими словами, проблема в том, что иногда есть завершающий /, а иногда нет.

Когда я создаю ссылку, нужно ли мне каждый раз вручную проверять наличие завершающего / и удалять его, если он есть? Или есть какая-то лучшая лучшая практика, которую я, возможно, упускаю?

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

1. Почему бы не использовать just to={match.url page.id() '/info' ?

2. Когда вы добавляете завершающий '/' в свою ссылку, его лучше использовать /app/home для match.url . Если вы хотите использовать /app/home/ , удалите '/' из ссылки

3. Проблема в том, что иногда есть завершающий / , а иногда нет. Предположительно, мое приложение должно работать в обеих ситуациях? Или я должен просто игнорировать один из них?

4. @Dblaze47 дело не в том, что я хочу использовать один или другой — это URL в браузере, поэтому пользователь может легко изменить его на любой.

5. Проверьте ответ, соответствует ли он вашим целям

Ответ №1:

Отбросьте завершающий / , предоставленный пользователем:

 const {match} = this.props;
let len = match.url.length;
match.url = (match.url[len - 1] === "/") ? match.url.substring(0, len-1) : match.url;

...

pages.map(page =>
<Link to={match.url '/' page.id() '/info'}>
    Go to info page for {page.title()}
</Link>)

Кроме того, вы можете добавить, если он также отсутствует:

 match.url = (match.url[len - 1] === "/") ? match.url : match.url   "/";

pages....
    <Link to={match.url   page.id() ....}
...

Я думаю, что проще добавить недостающий, а не отбрасывать существующий.

Метки: