react router indexrouter activeclassname 问题

Question

在使用react router时候给Link设置了activeclassname属性。可以生效。但是在使用了IndexRouter进行路由的时候。默认进去的时候如何去让indexrouter对应的Link也显示激活样式

Answer 1

像这样的效果?
http://react-router.coding.io/

https://coding.net/u/chenhui/p/react-route-demo

// 使用 
<IndexLink to="/" activeClassName="active">Home</IndexLink>
// 代替
<Link to="/" activeClassName="active">Home</Link>

如果使用 Link 的话, 进入任何一个 URL 都会激活 / 的active

使用 IndexLink 可以理解为 有且只有这个(/) uri 匹配到才 active

这是官方的文档
https://github.com/rackt/react-router/blob/master/docs/guides/basics/IndexRoutes.md

If you were to <Link to="/">Home</Link> in this app, it would always
be active since every URL starts with /. This is a problem because
we'd like to link to Home but only be active if Home is rendered.

To have a link to / that is only active when the Home route is
rendered, use <IndexLink to="/">Home</IndexLink>.