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.pathnameexact是否匹配
/one /one/two true
/one /one/two false

strict配置:

路径location.pathnamestrict是否匹配
/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属性含义的主要内容,如果未能解决你的问题,请参考以下文章

react属性之exact

FragerLayout在片段内提供Measure.EXACTLY错误

在Tomcat的安装目录下conf目录下的server.xml文件中增加一个xml代码片段,该代码片段中每个属性的含义与用途

使用精确和严格的道具

React 路由

vue路由对象($route)参数简介