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

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

将匹配，并且 User 组件将使用 something 作为 this.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}/>

会被匹配，因为这条规则匹配所有路径等于 /about 的路由。

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

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

<Route component={NoMatch}/>

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

Answer 2

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

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

类似于：

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

React Router 开关组件匹配

React Router Switch Component Matches

javascript

reactjs

react-router

react-router-v4

react-router-dom