React Router v4在父级上设置activeClass

Question

不太熟悉react路由器,但我需要NavLink的功能来设置父li元素的活动类,而不是a元素.

为了实现这一点,我只看了它的源代码NavLink并将其复制到一个新元素.(使用打字稿的示例,但与js大致相同)

import * as React from 'react';
import { Link, withRouter, Route } from 'react-router-dom';


class LiNavLink extends React.Component<any, {}> {
    render() {
        const {to,exact, strict, activeClassName, className, activeStyle, style, isActive: getIsActive, ...rest } = this.props;
        return (
            <Route
                path={typeof to === 'object' ? to.pathname : to}
                exact={exact}
                strict={strict}
                children={({ location, match }) => {
                    const isActive = !!(getIsActive ? getIsActive(match, location) : match)

                    return (
                        <li 
                            className={isActive ? [activeClassName, className].join(' ') : className}
                            style={isActive ? { ...style, ...activeStyle } : style}>
                            <Link
                                to={to}
                                {...rest}
                            />
                        </li>
                    )
                }}
            />
        );
    }
}

export default LiNavLink;

那么用法:

<ul>
   <LiNavLink activeClassName='active' exact={true} strict to="/example"><span>Active</span></LiNavLink>
   <LiNavLink activeClassName='active' exact={true} strict to="/example/archived"><span>Archived</span></LiNavLink>
</ul>

我正在使用a HashRouter并且由于某种原因我无法弄清楚,当路由发生变化时,这不会更新,只有当我努力"刷新"页面时才会更新它应该如何更新.

我相信它永远不会更新,因为道具永远不会改变？所以它不知道更新自己？

我该如何更新？或者是我在其他地方的问题？

Answer 1

我发现通过使用 CSS，您可以通过在活动类中进行设置来使活动链接展开以填充其父<li>元素。display:block;

例如，如果我们的链接是：

<li>
  <NavLink to="/overview" className=styles.sideLink activeClassName=styles.sideLinkSelected>
    Overview 
  </NavLink>
</li>

那么我们的CSS将是：

&__sideLinkSelected
{
  background-color: blue;
  display:block;
}