web-dev-qa-db-ja.com

React-Router-Domのlocation.pathnameとmatch.urlの違いは?

props.location.pathnameprops.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

私は他のものを使うべきか、両方とも仕事をするべきですか?

11
cbdeveloper

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> ); } に移動した場合、その後

  • match.url/になります(URLの一致部分/somethingです)
  • location.pathname/何か(相対的なルートURL)

これが StackBlitzの例 です。

例では、ルートが正確なパスに一致しているかどうかは異なります( https://reacttraning.com/react-router/web/api/route/exact-bool )。

そうでない場合(そして/を取得するだけで/search/searchValueを取得したいだけ)場合は、match.urlを使用するとlocation.pathname - > /search/searchValueを超える可能性があるため、/search/searchValue/somethingを使用する必要があります。

1
Olivier Boissé

また、これらの違いも聞くのが大好きだ

0
Samuel