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

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.