Menu
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?
671
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 *
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.
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)
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.
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.
64
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
