关于导航的高亮以及类似(/?tab=a)这样的链接高亮问题

[ckinmind]

问题：

1. 普通导航的高亮
2. 只是问好后面参数不一样的高亮问题
3. 完美解决2中的问题

[ckinmind]

1. 普通导航的高亮

使用IndexLink来避免默认首页的一直高亮问题

 <ul className="menu" >
                    <IndexLink to="/" activeClassName="on">
                        <i className="iconfont icon-shouye"></i>首页
                    </IndexLink>
                    <Link to="/topic/create" activeClassName="on">
                        <i className="iconfont icon-fabu"></i>发表
                    </Link>
                    </Link>
                    <Link to={myUrl} activeClassName="on">
                        <i className="iconfont icon-wode"></i>我的
                    </Link>
 </ul>

[ckinmind]

2. 只是问好后面参数不一样的高亮问题

第一种情况只是解决了普通导航的高亮问题，即类似/, /a, /b这样类似的导航
如果是类似这种 /a, /a?tab=a, /a?tab=b, /a?tab=c这样的,第一种方案失效，首页一直会高亮，暂时的解决方法是额外加一层判断(要传路由参数进去), 暂时没找到更好的解决方案

const Nav = ({ tab })=> (
        <nav className="index-nav">
            <ul data-flex="box:mean">
                <li>
                    <IndexLink to="/" activeClassName={tab == 'all' ? 'on' : ''}>全部</IndexLink>
                </li>
                <li>
                    <Link to="/?tab=good" activeClassName="on">精华</Link>
                </li>
                <li>
                    <Link to="/?tab=share" activeClassName="on">分享</Link>
                </li>
                <li>
                    <Link to="/?tab=ask" activeClassName="on">问答</Link>
                </li>
                <li>
                    <Link to="/?tab=job" activeClassName="on">招聘</Link>
                </li>
            </ul>
            <div className="height"></div>
        </nav>
);

[ckinmind]

3. 完美解决2中的问题
参考资料：BUG: Unexpected behaviour for Active IndexLink with query param

 <li>
          <IndexLink to={{ pathname: '/', query: { tab: undefined } }} activeClassName="on">全部</IndexLink>
                </li>
                <li>
                    <Link to="/?tab=good" activeClassName="on">精华</Link>
                </li>
                <li>
                    <Link to="/?tab=share" activeClassName="on">分享</Link>
                </li>
                <li>
                    <Link to="/?tab=ask" activeClassName="on">问答</Link>
                </li>
                <li>
                    <Link to="/?tab=job" activeClassName="on">招聘</Link>
                </li>

将原来的to="/" 改为to={{ pathname: '/', query: { tab: undefined } }}