react.js - react-router 的<Link></Link> 下的activeClassName只能精准匹配如何才能模糊匹配？

问题描述

问 题

//jsx
<Link acitveClassName="activeRoute" to="/frontblog">
    前端文章
</Link>

//css
.activeRoute{
    border-left: 5px solid #70a3ff;
}

如果我当前的地址 /frontblog那么activeClassName会很好的工作
如果我当前的地址是 /frontblog/xx 那么activeClassName就不会生效了
如何在/frontblog/xx/yy/zz 等只要是frontblog下的任意地址都可以显示我想要的边框

解决方案

路由嵌套

<Route path="frontblog" component={FrontBlog}>
  <Route path=":id" component={FrontBlogDetail}/>
</Route>

这篇关于react.js - react-router 的<Link></Link> 下的activeClassName只能精准匹配如何才能模糊匹配？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！