React router: Как обрабатывать трейлинг / в match.url при создании ссылок?

Question

Я собирал ссылки в своем приложении React (с использованиемact-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
• и т. Д.

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

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

Answer 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() ....}
... 

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