这条线
<Route path="/:user" component={User}/>
意味着在
/
之后的所有内容都将传递到
component
的
this.props.params.user
变量中,并且将呈现
User
组件。匹配规则只关心给定的
path
是否与
path=
模式匹配,而不关心资源是否存在。如果我得到以
/
开头的路径,后面跟着一个文本,则该文本将被解析为路由参数
user
,并且将呈现
User
组件。是的,在这种情况下,
this.props.params.user
将具有“about”的值,但是如何处理变量以及在找不到此名称的用户时应显示什么完全取决于您。我认为他们只是想说,在您有更多通常会同时匹配的模式的情况下,应使用
<Switch>
组件,因此只有第一个匹配项才会实际呈现。例如,当使用
<Switch>
时:A)路径为
/about
,规则
<Route path="/about" component={About}/>
如果路径为/something
,则规则会匹配并渲染About
组件,并且不再进行任何评估。
B) 如果路径为/something
,则规则
<Route path="/about" component={About}/>
不会被匹配,但规则如下:
<Route path="/:user" component={User}/>
如果匹配成功,User
组件将使用this.props.params.user
参数呈现something
,并且不会进行其他评估。
C) 如果路径为/
,则规则
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
不会被匹配但是
<Route component={NoMatch}/>
将渲染NoMatch
组件和will
。
相反地,如果您没有使用<Switch>
,则路径为/about
:
<Route path="/about" component={About}/>
如果路径与/about
完全匹配,则会得到匹配,因为该规则适用于所有路径等于/about
的路由。
<Route path="/:user" component={User}/>
这条规则匹配所有以/
开头并且后面跟有文本的路由,因此也会匹配。
<Route component={NoMatch}/>
由于该规则根本不考虑路径,因此将始终得到匹配。