In the react router docs here it says:

Consider this code:

<Route path="/about" ponent={About}/>
<Route path="/:user" ponent={User}/>
<Route ponent={NoMatch}/>

If the URL is /about, then <About>, <User>, and <NoMatch> will all render because they all match the path.

How do they all match the path /about? I can't see why this would be true, unless a user had the username about. What am I missing?

In the react router docs here it says:

Consider this code:

<Route path="/about" ponent={About}/>
<Route path="/:user" ponent={User}/>
<Route ponent={NoMatch}/>

If the URL is /about, then <About>, <User>, and <NoMatch> will all render because they all match the path.

How do they all match the path /about? I can't see why this would be true, unless a user had the username about. What am I missing?

• javascript
• reactjs
• react-router
• react-router-v4
• react-router-dom

Share Improve this question Follow asked Apr 24, 2017 at 9:42 AdzzAdzz 1,57911 gold badge1313 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The Line

<Route path="/:user" ponent={User}/>

means that everything after / will be passed into this.props.params.user variable of ponent and User ponent would be rendered.

The matching rule only cares if the path given matches your path= pattern, it doesn't care if the resource actually exists. If I get path starting with / the and there is a text following the variable, the text will be parsed as Route Parameter user and User ponent will be rendered and that's it. So yes, this.props.params.user will have value of "about" in this case, but how you handle the variable and what would you display in case user such name is not found is entirely up to you.

I think they are just trying to say that in case that you have more patterns that would normally get matched all at once, you should use <Switch> ponent so only the first match would actually render.

So e.g. when used <Switch>:

A) and the path is /about, rule

<Route path="/about" ponent={About}/>

would get matched and About ponent would get rendered and no more evaluation are done.

B) if the path is /something, rule

<Route path="/about" ponent={About}/>

won't get matched, but rule:

<Route path="/:user" ponent={User}/>

would get matched, and User ponent would be rendered with something as this.props.params.user param and no more evaluation are done.

C) If the path is / the rules

<Route path="/about" ponent={About}/>
<Route path="/:user" ponent={User}/>

won't get matched but

<Route ponent={NoMatch}/>

will and NoMatch ponent would get rendered.

On contrary when not using <Switch>, if your path is /about:

<Route path="/about" ponent={About}/>

Would get matched, because this rule matches all routes which paths are equal to /about.

<Route path="/:user" ponent={User}/>

Would also get matched because this rule matches all routes which start with / and there is a text following.

<Route ponent={NoMatch}/>

Would too get matched because this rule doesn't care about path at all, it gets always matched.

As they're not contained within a <switch>...</switch> element, they're all evaluated, and evaluated independently.

The router has no knowledge of the users in the system - it's only looking for a string match within the path.

Something like:

if (path === '/about') { return 'About' }
if (typeof path === 'String') { return 'User' }
if (true) { return 'noMatch' }