5

在此处的反应路由器文档中，它说：

考虑这段代码：

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

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

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

4

2 回答 2

5

线

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

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

匹配规则只关心path给定是否与您的path=模式匹配，它不关心资源是否实际存在。如果我得到以 开头/的路径并且变量后面有一个文本，则该文本将被解析为路由参数user，并且User组件将被渲染，仅此而已。所以是的，this.props.params.user在这种情况下将具有“约”的值，但是您如何处理变量以及在找不到用户这样的名称的情况下您将显示什么完全取决于您。

我认为他们只是想说，如果您有更多通常会一次全部匹配的模式，您应该使用<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}/>

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

于 2017-04-24T10:10:14.677 回答
0

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

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

就像是：

if (path === '/about') { return 'About' }
if (typeof path === 'String') { return 'User' }
if (true) { return 'noMatch' }
于 2017-04-24T10:22:30.060 回答