小编典典

反应路由器交换机组件匹配

reactjs

此处的react router文档中说:

考虑以下代码:

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

如果URL是/about,则<About><User><NoMatch>将全部呈现,因为它们都与路径匹配。

它们如何与路径匹配/about?除非用户使用username,否则我看不出为什么会这样about。我想念什么?


阅读 283

收藏
2020-07-22

共1个答案

小编典典

线

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

意味着之后的所有内容都/将传递到和的this.props.params.user变量中。component``User

匹配规则仅关心path给定是否与您的path=模式匹配,并不关心资源是否实际存在。如果我得到以开头/的路径,并且变量后面有文本,则该文本将被解析为Route
Parameter,user并且User将呈现组件。因此,是的,this.props.params.user在这种情况下将具有“大约”的值,但是如何处理该变量以及在找不到该名称的用户的情况下将显示什么完全取决于您。

我认为他们只是想说,如果您有更多通常可以一次全部匹配的模式,则应该使用<Switch>component,这样只有第一个匹配才会实际呈现。

所以例如当 使用时 <Switch>

A) 路径为/about,规则

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

将被匹配,About组件将被渲染,并且不再进行评估。

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

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

不会匹配,但是规则:

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

将得到匹配,User组件将与被渲染somethingthis.props.params.userPARAM并没有更多的评价完成。

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

也会被匹配,因为该规则根本不关心路径,它总是被匹配。

2020-07-22