javascript - Difference between location.pathname and match.url in react-router-dom? - Stack Overflow

admin管理员组

文章数量:1221351

What's the difference between props.location.pathname and props.match.url

in react-router-dom?

From their DOCS:

match.url

(string) The matched portion of the URL. Useful for building nested <Link>s

location

A location object to be used for matching children elements instead of the current history location (usually the current browser URL).

So far, I've ony seen them with exact same values.

Example:

If my route is matched in this url:

/search/searchValue?category=whatever

And I want to remove the query strings and go to:

/search/searchValue

Should I use one over the other or they both will work?

What's the difference between props.location.pathname and props.match.url

in react-router-dom?

From their DOCS: https://reacttraining.com/react-router/web/api/location

match.url

(string) The matched portion of the URL. Useful for building nested <Link>s

location

A location object to be used for matching children elements instead of the current history location (usually the current browser URL).

So far, I've ony seen them with exact same values.

Example:

If my route is matched in this url:

/search/searchValue?category=whatever

And I want to remove the query strings and go to:

/search/searchValue

Should I use one over the other or they both will work?

• javascript
• reactjs
• react-router
• react-router-v4
• react-router-dom

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jul 12, 2019 at 16:50 cbdevelopercbdeveloper 31.4k4444 gold badges197197 silver badges393393 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 18

location.pathname represents the root-relative url.

match.url represents the matched portion of the URL, so maybe a portion of location.pathname.

Given these two components :

function Home({match, location}) {
  return (
    <div>
      {match.url}
      <br/>
      {location.pathname}
    </div>
  );
}

function App() {
  return (
    <Router>
      <Route path="/" component={Home}/>
    </Router>
  );
}

If you go to /something, then

• match.url will be / (because the matched portion of the URL is /)
• location.pathname will be /something (the relative-root URL)

Here is the example on stackblitz.

In your example, it depends whether your route is matching the exact path or not (https://reacttraining.com/react-router/web/api/Route/exact-bool).

If it's not the case (and you only want to retrieve /search/searchValue) then you should use match.url because location.pathname could be more than /search/searchValue -> /search/searchValue/something.

本文标签： javascriptDifference between locationpathname and matchurl in reactrouterdomStack Overflow