javascript - React Router 开关组件匹配

Question

在 React 路由器文档中 here它说:

Consider this code:

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

If the URL is /about, then <About>, <User>, and <NoMatch> will all render because they all match the path.

怎么都匹配路径/about ？我不明白为什么这是真的，除非用户有用户名 about .我错过了什么？

Answer 1

线

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

表示/之后的所有内容将传递到 this.props.params.user component 的变量和 User组件将被渲染。

匹配规则只关心 path给定匹配您的 path=模式，它不关心资源是否实际存在。 如果我得到以 / 开头的路径the 并且变量后面有一个文本，该文本将被解析为路由参数 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}/>

会匹配，并且 User组件将使用 something 呈现作为this.props.params.user param 并且不再进行评估。

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

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