4

在反应路由器文档here它说:阵营路由器交换机组件匹配

考虑以下代码:如果URL是​​,则<About><User>

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

,并<NoMatch>将全部呈现,因为它们全都匹配路径。

它们如何匹配路径​​?我不明白为什么这是真的,除非用户有用户名about。我错过了什么?

回答

4

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

意味着一切后/将被传递到的componentthis.props.params.user变量和User部分将被渲染。

匹配规则只关心给出的path是否与您的path=模式匹配,它并不关心资源是否真实存在。如果我得到从/开始的路径,并且变量后面有一个文本,则文本将被解析为路由参数userUser组件将被渲染,就是这样。所以是的,this.props.params.user在这种情况下将具有“约”的价值,但是如何处理该变量以及如果用户没有找到这样的名称则显示什么完全取决于您。

我认为他们只是想说,如果你有更多的模式,通常会一次匹配所有,你应该使用<Switch>组件,所以只有第一场比赛才会真正呈现。

因此,例如,当使用<Switch>

A)和路径是​​,排除

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

将得到匹配,About组件会得到呈现,并没有更多的评价完成。

B)如果路径是/something,规则

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

不会得到匹配,但是规则:

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

会得到匹配,User组件将与something呈现因为this.props.params.user参数并没有更多的评估完成。

C)如果路径/规则

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

不会得到匹配,但

<Route component={NoMatch}/> 

意志和NoMatch组件会得到呈现。

相反地,当不使用<Switch>,如果路径为​​:

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

将得到匹配,因为这个规则,路径等于​​所有路由匹配。

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

也将得到匹配,因为该规则与/开始,有一个文本以下的所有路由匹配。

<Route component={NoMatch}/> 

太会得到匹配,因为这个规则不关心道路可言,它就会永远匹配。

0

因为它们不包含在<switch>...</switch>元素中,所以它们都是独立评估和评估的。

路由器不知道系统中的用户 - 它只查找路径内的字符串匹配。

喜欢的东西:

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