React 路由器交换机组件匹配

Question

在反应路由器文档中它说：

考虑这段代码：

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

如果 URL 为/about，则<About>、<User>、 和<NoMatch>都会呈现，因为它们都与路径匹配。

它们如何与路径匹配/about？我不明白为什么这是真的，除非用户有 username about。我缺少什么？

Answer 1

线路

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

意味着之后的所有内容都/将被传递到this.props.params.user变量 of中component，并且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}/>

将获得匹配，并且组件将使用as参数User进行渲染，并且不再进行任何评估。somethingthis.props.params.user

C)如果路径是/规则

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

不会被匹配但是

<Route component={NoMatch}/>

will 和NoMatch组件将被渲染。

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

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

会被匹配，因为此规则匹配 paths 等于 的所有路由/about。

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

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

<Route component={NoMatch}/>

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