React Router Switch 组件匹配

Question

在React Router文档这里中提到：

考虑下面的代码：

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

如果URL是/about，那么<About>、<User>和<NoMatch>都会被渲染，因为它们都与路径匹配。

它们如何都匹配路径/about呢？除非用户的用户名为about，否则我看不出来这是真的。我错过了什么吗？

- Adzz

Answer 1

这条线

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

由于该规则根本不考虑路径，因此将始终得到匹配。

- Matej P.

Answer 2

由于它们不包含在<switch>...</switch>元素中，因此它们都会被评估，并且独立地进行评估。

路由器对系统中的用户没有任何了解 - 它只是在路径中寻找字符串匹配。

类似于：

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

- olmesm