Route exact属性含义
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Route exact属性含义相关的知识,希望对你有一定的参考价值。
<Route>
组件有如下属性:
- path(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);
- exact(bool):为true时,则要求路径与location.pathname必须完全匹配;
- strict(bool):true的时候,有结尾斜线的路径只能匹配有斜线的location.pathname;
再次奉上两个鲜活的例子:
exact配置:
路径 | location.pathname | exact | 是否匹配 |
---|---|---|---|
/one | /one/two | true | 否 |
/one | /one/two | false | 是 |
strict配置:
路径 | location.pathname | strict | 是否匹配 |
---|---|---|---|
/one/ | /one | true | 否 |
/one/ | /one/ | true | 是 |
/one/ | /one/two | true | 是 |
<Link>
和之前版本没太大区别,重点看下组件属性:
- to(string/object):要跳转的路径或地址;
- replace(bool):为 true 时,点击链接后将使用新地址替换掉访问历史记录里面的原地址;为 false 时,点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false;
示例如下:
// Link组件示例
// to为string
<Link to="/about">关于</Link>
// to为obj
<Link to={{
pathname: ‘/courses‘,
search: ‘?sort=name‘,
hash: ‘#the-hash‘,
state: { fromDashboard: true }
}}/>
// replace
<Link to="/courses" replace />
<NavLink>
<NavLink>
是<Link>
的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数,组件属性:
- activeClassName(string):设置选中样式,默认值为 active;
- activeStyle(object):当元素被选中时, 为此元素添加样式;
- exact(bool):为 true 时, 只有当地址完全匹配 class 和 style 才会应用;
- strict(bool):为 true 时,在确定位置是否与当前 URL 匹配时,将考虑位置 pathname 后的斜线;
- isActive(func):判断链接是否激活的额外逻辑的功能;
从这里我们也可以看出,新版本的路由在组件化上面确实下了不少功夫,来看看NavLink的使用示例:
// activeClassName选中时样式为selected
<NavLink
to="/faq"
activeClassName="selected"
>FAQs</NavLink>
// 选中时样式为activeStyle的样式设置
<NavLink
to="/faq"
activeStyle={{
fontWeight: ‘bold‘,
color: ‘red‘
}}
>FAQs</NavLink>
// 当event id为奇数的时候,激活链接
const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}
<NavLink
to="/events/123"
isActive={oddEvent}
>Event 123</NavLink>
<Switch>
该组件用来渲染匹配地址的第一个<Route>
或者<Redirect>
。那么它与使用一堆route又有什么区别呢?
<Switch>
的独特之处是独它仅仅渲染一个路由。相反地,每一个包含匹配地址(location)的<Route>
都会被渲染。思考下面的代码:
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
如果现在的URL是/about
,那么<About>
, <User>
, 还有<NoMatch>
都会被渲染,因为它们都与路径(path)匹配。这种设计,允许我们以多种方式将多个<Route>
组合到我们的应用程序中,例如侧栏(sidebars),面包屑(breadcrumbs),bootstrap tabs等等。 然而,偶尔我们只想选择一个<Route>
来渲染。如果我们现在处于/about
,我们也不希望匹配/:user
(或者显示我们的 “404” 页面 )。以下是使用 Switch 的方法来实现:
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
</Switch>
现在,如果我们处于/about
,<Switch>
将开始寻找匹配的<Route>
。<Route path="/about"/>
将被匹配, <Switch>
将停止寻找匹配并渲染<About>
。同样,如果我们处于/michael
,<User>
将被渲染。
以上是关于Route exact属性含义的主要内容,如果未能解决你的问题,请参考以下文章
FragerLayout在片段内提供Measure.EXACTLY错误
在Tomcat的安装目录下conf目录下的server.xml文件中增加一个xml代码片段,该代码片段中每个属性的含义与用途