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

1 Answer 1

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.