React Router Switch Components

Question

The docs response router says here :

Consider this code:

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

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

How do they all fit the path /about? I do not understand why this would be true if the user did not have a username about. What am I missing?

Answer 1

Line

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

means that everything after /will be transferred to the this.props.params.usercomponent variable componentand User.

, path path=, , . , /, , , User User, . , , this.props.params.user "about" , , , .

, , , , , <Switch>, .

, , <Switch>:

A), /about,

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

, About .

B), /something,

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

, :

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

, User something this.props.params.user param, .

C) /

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

,

<Route component={NoMatch}/>

NoMatch.

, <Switch>, /about:

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

, , /about.

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

, , /, .

<Route component={NoMatch}/>

, , .

Answer 2

<switch>...</switch>, .

- .

- :

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