次のようなコードを使用して、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
上記によって生成されたリンクは期待どおりです。
- /アプリ/ホーム/1/情報
- /アプリ/ホーム/2/情報
- /アプリ/ホーム/3/情報
- 等
しかし、この (微妙に異なる) パスをロードすると (末尾の / に注意してください):
/app/home/
生成されたリンクは間違っています (ホームの後に / が二重になっていることに注意してください):
- /アプリ/ホーム//1/情報
- /アプリ/ホーム//2/情報
- /アプリ/ホーム//3/情報
- 等
言い換えれば、問題は、末尾に / がある場合とない場合があることです。
リンクを作成するとき、末尾の / を毎回手動でチェックし、存在する場合は削除する必要がありますか? または、おそらく見逃しているより良いベストプラクティスがありますか?