react-router交换机组件匹配

IT技术 javascript reactjs react-router react-router-v4 react-router-dom
2021-05-20 17:05:25

此处的react-router文档中它说:

考虑这个代码:

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

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

它们如何匹配路径/about我不明白为什么会这样,除非用户有 username about我错过了什么?

2个回答

线

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

意味着之后的所有内容都/将被传递到this.props.params.user变量 ofcomponent并且User组件将被呈现。

匹配规则只关心path给定的path=模式是否匹配你的模式,它不关心资源是否确实存在。如果我的路径以/the开头并且变量后面有一个文本,则该文本将被解析为 Route Parameteruser并且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参数呈现并且不再进行评估。

C)如果路径是/规则

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

不会匹配但是

<Route component={NoMatch}/>

will 和NoMatchcomponent 会被渲染。

相反,不使用时 <Switch>,如果您的路径是/about

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

会得到匹配,因为此规则匹配所有路径等于 的路由/about

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

也会被匹配,因为此规则匹配所有以 开头/并且后面有文本的路由

<Route component={NoMatch}/>

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

因为它们不包含在一个<switch>...</switch>元素中,所以它们都被评估,并且被独立评估。

路由器不知道系统中的用户——它只是在路径中寻找字符串匹配。

就像是:

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