props.location.pathname
とprops.match.url
の違いは何ですか
react-router-dom
では?
彼らのドキュメントから: https://reacttraning.com/react-router/web/api/location
match.url
(文字列)URLの一致部分。ネストした
<Link>
sを構築するのに役立ちます場所
現在の履歴の場所(通常は現在のブラウザURL)の代わりに、子要素を一致させるために使用されるロケーションオブジェクト。
これまでのところ、私は全く同じ値でそれらを見ました。
例:
このURLで自分のルートが一致した場合
/search/searchValue?category=whatever
クエリ文字列を削除して、次のようになります。
/search/searchValue
私は他のものを使うべきか、両方とも仕事をするべきですか?
location.pathname
はルート相対URLを表します。
match.url
は、URLの一致したURLの一致部分を表します。そのため、location.pathname
の一部です。
これら2つのコンポーネントを考えると:
__コード__
function Home({match, location}) {
return (
<div>
{match.url}
<br/>
{location.pathname}
</div>
);
}
function App() {
return (
<Router>
<Route path="/" component={Home}/>
</Router>
);
}
に移動した場合、その後
/something
です)これが StackBlitzの例 です。
例では、ルートが正確なパスに一致しているかどうかは異なります( https://reacttraning.com/react-router/web/api/route/exact-bool )。
そうでない場合(そして/
を取得するだけで/search/searchValue
を取得したいだけ)場合は、match.url
を使用するとlocation.pathname
- > /search/searchValue
を超える可能性があるため、/search/searchValue/something
を使用する必要があります。
また、これらの違いも聞くのが大好きだ