Question

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

考虑以下代码：

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

如果网址为/about，那么<About>，<User>和<NoMatch>将全部呈现，因为它们都与路径匹配。

它们如何与路径/about匹配？我不明白为什么会这样，除非用户有用户名about。我错过了什么？

Answer 1

The Line

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

表示/之后的所有内容都会传递到this.props.params.user的{{1}}变量中，并且component组件会被呈现。

匹配规则仅关注User给定的path模式是否匹配，如果资源确实存在，则不关心。如果我开始路径使用path=并且变量后面有一个文本，文本将被解析为路径参数/，并且user组件将被渲染并且它就是它。所以是的，User将具有＆＃34;关于＆＃34;的价值。在这种情况下，但是你如何处理变量以及如果找不到用户这样的名字会显示什么完全取决于你。

我认为他们只是想说，如果你有更多的模式通常会同时匹配，你应该使用this.props.params.user组件，这样只有第一个匹配实际上会呈现。

所以，例如当使用 <Switch>：

时

A），路径为<Switch>，规则

/about

会匹配，<Route path="/about" component={About}/>组件将被渲染，不再进行评估。

B）如果路径是About，则规则

/something

赢得了匹配，但是规则：

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

会匹配，<Route path="/:user" component={User}/>组件会以User作为something参数呈现，不再进行评估。

C）如果路径是this.props.params.user规则

赢了，但

<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}/>开头并且后面有文字的路线。

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

Answer 2

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

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

类似的东西：

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

反应路由器交换机组件匹配

2 个答案: