react-router交换机组件匹配
IT技术
javascript
reactjs
react-router
react-router-v4
react-router-dom
2021-05-20 17:05:25
2个回答
线
<Route path="/:user" component={User}/>
意味着之后的所有内容都/
将被传递到this.props.params.user
变量 ofcomponent
并且User
组件将被呈现。
匹配规则只关心path
给定的path=
模式是否匹配你的模式,它不关心资源是否确实存在。如果我的路径以/
the开头并且变量后面有一个文本,则该文本将被解析为 Route Parameteruser
并且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
component 会被渲染。
相反,不使用时 <Switch>
,如果您的路径是/about
:
<Route path="/about" component={About}/>
会得到匹配,因为此规则匹配所有路径等于 的路由/about
。
<Route path="/:user" component={User}/>
也会被匹配,因为此规则匹配所有以 开头/
并且后面有文本的路由。
<Route component={NoMatch}/>
也会被匹配,因为这个规则根本不关心路径,它总是被匹配。
因为它们不包含在一个<switch>...</switch>
元素中,所以它们都被评估,并且被独立评估。
路由器不知道系统中的用户——它只是在路径中寻找字符串匹配。
就像是:
if (path === '/about') { return 'About' }
if (typeof path === 'String') { return 'User' }
if (true) { return 'noMatch' }
其它你可能感兴趣的问题