React Router Switch Component Matches

In the react router docs here it says: Consider this code:

Solution 1:

The Line

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

means that everything after / will be passed into this.props.params.user variable of component and User component 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 component 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> component so only the first match would actually render.

So e.g. when used <Switch>:

A) and the path is /about, rule

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

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

B) if the path is /something, rule

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

won't get matched, but rule:

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

would get matched, and User component 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" component={About}/>
<Route path="/:user" component={User}/>

won't get matched but

<Route component={NoMatch}/>

will and NoMatch component would get rendered.

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

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

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

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

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

<Route component={NoMatch}/>

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

Solution 2:

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' }

Share