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>
slocation
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?
match. path would be "/users/:userId" while match. url would have the :userId value filled in, e.g. "users/5".
A match object contains information about how a <Route path> matched the URL. match objects contain the following properties: params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path. isExact - (boolean) true if the entire URL was matched (no trailing characters)
The term "location" in React Router refers to the Location interface from the history library. Note: The history package is React Router's only dependency and many of the core types in React Router come directly from that library including Location , To , Path , and others.
Use the useLocation() hook to get the current route with React Router, e.g. const location = useLocation() . The hook returns the current location object. For example, you can access the pathname as location. pathname .
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
/
)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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With