web-dev-qa-db-ja.com

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

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

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

javascriptreactjsreact-routerreact-router-v4react-router-dom
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