1

次のようなコードを使用して、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/情報

言い換えれば、問題は、末尾に / がある場合とない場合があることです。

リンクを作成するとき、末尾の / を毎回手動でチェックし、存在する場合は削除する必要がありますか? または、おそらく見逃しているより良いベストプラクティスがありますか?

4

1 に答える 1