Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 389
cbdeveloper Avatar asked Jul 12 '19 16:07

cbdeveloper


People also ask

What is the difference between match path and match URL?

match. path would be "/users/:userId" while match. url would have the :userId value filled in, e.g. "users/5".

What is match URL react router?

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)

What is location in react router?

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.

How do I get pathname in react Dom router?

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 .


1 Answers

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.

like image 123
Olivier Boissé Avatar answered Oct 25 '22 05:10

Olivier Boissé