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
.