Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What exactly is match.url in React Router?

I see in the React Router docs that you pass into components the match prop, and you can call match.url, but you never seem to actually pass in anything to the component. So what exactly is match and where are you getting it from?

like image 671
JorahFriendzone Avatar asked Dec 11 '17 22:12

JorahFriendzone


People also ask

What is match URL?

A match pattern is essentially a URL that begins with a permitted scheme ( http , https , file , or ftp , and that can contain ' * ' characters. The special pattern <all_urls> matches any URL that starts with a permitted scheme. Each match pattern has 3 parts: scheme—for example, http or file or *

What is the difference between match path and match URL?

Path allows you to use parameters in nested Routes. If the path is users/:id you can reach the id using useParams() hook but if it's url, it will be only users/123 and since there is no parameter you can't reach the id. I guess this is the main difference between them.

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 the best place to use match URL and match path respectively in react?

path - (string) The path pattern used to match. Useful for building nested <Route>s. url - (string) The matched portion of the URL. Useful for building nested <Link>s.


1 Answers

Hope this helps: https://reacttraining.com/react-router/web/api/match

You get match in the props, usually when your component is called by a Route you will get it, and you can pass it down to other components as regular props to extract or use the information.

location is also very useful when interacting with react-router. I usually use match to do rendering and redirecting depending on the isExact flag, and location to have the actual URL that the browser has.

like image 64
Franklin Avatar answered Oct 12 '22 05:10

Franklin