React-Router-DOM path match

#1

Hello all.

I have started going over how to use React with react-router-dom, and I am interested in understanding the reason for the Route component matching any path.
For example:

<Route path="/" component={Home} />
<Route path="/about" component={About} />

I understand that on the root path, only the Home component is rendered, and then on the about path, both the Home and About components are rendered.

This can be avoided by using the exact keyword.

Question: Why would this behaviour even exist? When would one not want to have the path match exactly?

#2

Well an example might be if you have a blog and you have a route like /posts and then another route that might be /posts/:postId and you have some posts displayed and maybe somewhere beneath them a full post, a specific one. Might be more cases but ye mostly it s not used like this I guess.

#3

You might have the / route as a default route (least specific) on the bottom in a Switch when nothing else matches.

Route Matchers

One important thing to note is that a <Route path> matches the beginning of the URL, not the whole thing. So a <Route path="/"> will always match the URL. Because of this, we typically put this <Route> last in our <Switch>. Another possible solution is to use <Route exact path="/"> which does match the entire URL.

#4

Thank you. I did not think about this.

I somehow missed that when Switch is used, the first, and only the first, is matched and rendered.

#5