Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Router 4 Basics Navigating, Nesting and Redirecting Routes Using the Match Object

What is the difference between a path and url? Why use match.path for the route components but url for navlink?


3 Answers

Jordan Wren
Jordan Wren
30,940 Points

When we are creating a route path it is necessary to use the match.path; however, when we're linking to a path that is already created we use the match.url.

So in the case of the example, we created a route path to the html component using path={`${match.path}/html`}.
And when we want to link our navigation links to the created route path, we use to={`${match.url}/html`}.

G H Mahimaanvita
G H Mahimaanvita
16,234 Points

match.path returns a string that you define when creating a route as Jordan Wren said
match.url also returns a string that is the part of the url which is matched due to which the component is rendered
In this case, both of them return the same value, but the difference becomes clear when parameters are passed into the url in the next part of the course (2:48)

Kriz Ferre Fajardo
Kriz Ferre Fajardo
Front End Web Development Techdegree Student 18,770 Points

Is it safe to just remember that for path=, we use match.path, then for to=, we use match.url? Are there instances that match.path and match.url would be different?