如何在react-router v4中设置活动链接的样式？

Question

在react-router v3中,我们使用activeStyle和activeClassName来设置活动链接的样式

我们可以做这样的事情

  <div id="tags-container">
    {tags.map(t =>
      <Link
        className="tags"
        activeStyle={{ color: 'red' }}
        to={t.path}
      >
        {t.title}
      </Link>
    )}
  </div>

我想知道如何在v4中做同样的事情？

Answer 1

使用NavLink代替链接.它没有记录,但它的工作正如你所期望的那样. https://github.com/ReactTraining/react-router/issues/4318

更新17.05.2017:

https://reacttraining.com/react-router/web/api/NavLink

Answer 2

你可以NavLink在react-routerv4中完成它

 <div id="tags-container">
   {tags.map(t =>
     <NavLink
       className="tags"
       activeStyle={{ color: 'red' }}
       to={t.path}
     >
       {t.title}
     </NavLink>
   )}
 </div>

Answer 3

如果您遇到导航菜单可以正常工作的问题，但是单击链接和更改路线后导航菜单无法正确更新，但是如果按F5则可以正常工作，您可以执行以下操作：

这可能是因为您使用的Redux 功能具有shouldComponentUpdate生命周期方法connect。您可能将Nav组件包裹在中connect。一切都很好。shouldComponentUpdate是什么毁了你的生活。

要解决此问题，只需将路由器加入mapStateToProps功能即可：

// This lets shouldComponentUpdate know that the route changed,
// which allows the Nav to re-render properly when the route changes, woot!
const mapStateToProps = (state) => {
  return {
    router: state.router,
  }
}

// or, if you prefer pro style destructure shorthand:
const mapStateToProps = ({ router }) => ({ router })

如果您不确定从何state.router而来，那么它来自组合了reducer的文件，您将看到类似以下内容：

import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'
import authReducer from './components/auth/auth_reducer'

export default combineReducers({
  router: routerReducer,
  auth: authReducer,
})

这是一些漂亮的Nav链接的HTML和CSS：

的HTML

<ul id="Nav_menu">
  <li>
    <NavLink
      to="/home"
      className="Nav_link"
      activeClassName="activeRoute"
      activeStyle={{ color: 'teal' }}
    >
      HOME
    </NavLink>
  </li>
  <li>
    <NavLink
    to="/products"
    className="Nav_link"
    activeClassName="activeRoute"
    activeStyle={{ color: 'teal' }}
    >
      PRODUCTS
    </NavLink>
  </li>
</ul>

注意：如果要链接到"/"，请将exactprop放在NavLink上。

的CSS

#Nav_menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.Nav_link:link {
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.6rem;
  text-decoration: none;
}
.Nav_link:visited {
  color: #fff;
}
.Nav_link:hover {
  color: yellow;
}
.Nav_link:active {
  color: teal;
}

.activeRoute {
  background-color: yellow;
  border-bottom: 0.4rem solid teal;
  cursor: not-allowed;
}

注意activeStyleHTML标记中。这是我可以更改活动路线/链接上文本颜色的唯一方法。它不工作，当我把color: teal;在activeRouteCSS类。在另一个标签中打开它：https : //github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

如果您不知道为什么我使用rem而不是px。这是您研究网络可访问性和基础的绝佳机会font-size: 10px;。

保持健康，玩得开心。

Answer 4

来自react-router v4自定义链接文档的这个示例将帮助您完成它：

const OldSchoolMenuLink = ({ label, to, activeOnlyWhenExact }) => (
  <Route path={to} exact={activeOnlyWhenExact} children={({ match }) => (
    <div className={match ? 'active' : ''}>
      {match ? '> ' : ''}<Link to={to}>{label}</Link>
    </div>
  )}/>
);

因此，在您的情况下，您可以创建以下组件：

const CustomLink = ({ activeStyle, children, className, to, activeOnlyWhenExact }) => (
  <Route path={to} exact={activeOnlyWhenExact} children={({ match }) => (
    <Link to={to} className={className} style={match && activeStyle}>{children}</Link>
  )}/>
);

然后像这样使用它：

  <div id="tags-container">
    {tags.map(t =>
      <CustomLink
        className="tags"
        activeStyle={{ color: 'red' }}
        to={t.path}
      >
        {t.title}
      </CustomLink>
    )}
  </div>