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 v4

中的react-router来完成此操作

 <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生命周期方法。您可能已将导航组件包裹在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来自何处，它来自您将缩减器合并到的文件，您会看到如下内容：

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

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

这是一个非常漂亮的导航链接的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>

注意：如果要链接到"/"，请将exact道具放在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;
}

注意HTML标记中的activeStyle。这是我可以更改活动路径/链接上文本颜色的唯一方法。当我将color: teal;放入activeRoute CSS类时，它无法正常工作。在另一个标签中打开：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

如果您不知道我使用rem代替px的原因。这是一个研究Web辅助功能的基础font-size: 10px;的绝佳机会。

保持健康并享受乐趣。

Answer 4

react-router v4 custom link documentation中的这个示例将帮助您完成它：

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}
      </Link>
    )}
  </div>

Answer 5

扩展@agm1984's answer： NavLinks的解决方案没有正确更新样式，使用来自routerReducer的{{1}}，对我来说没有用。相反，我发现问题是react-router-redux包装器使用connect并阻止重新呈现包含NavLink的组件。

在我的情况下，正确的解决方案是将选项对象传递给shouldComponentUpdate作为第四个参数，如下所示：

connect

Answer 6

一切仍然有效。但是，react-router-dom v4会将Link替换为NavLink

import { NavLink as Link } from 'react-router-dom';也没关系。注意：默认情况下，导航链接处于活动状态，因此您可以设置a:active或activeStyle={{color: 'red'}}

的样式

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

6 个答案: