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

Posted 2023-02-21

【中文标题】如何在 react-router v4 中设置活动链接的样式？

【英文标题】：How can I style active Link in react-router v4?

【发布时间】：2017-06-22 00:04:59

【问题描述】：

在 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 中做同样的事情？

【问题讨论】：

你在 v4 中使用相同的东西时遇到任何错误或无法正常工作，??因为我认为这些将与 v4 以相同的方式工作。

@Mayank Shukla：警告： 标签上的未知道具activeStyle

【参考方案1】：

React 路由器 v6：

来源：Active NavLink Classes with React Router

我知道这是 v4 的问题，但由于 v6 已发布，我们现在可以通过使用 className 属性来完成此操作，该属性现在接受一个函数并传递一个 @ 987654324@布尔属性，像这样：

<NavLink
  to="users"
  className=( isActive ) => (isActive ? 'active' : 'inactive')
>
  Users
</NavLink>

您也可以添加多个类，因为 v6 已发布：

<NavLink
  to="users"
  className=( isActive ) =>
    isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
  
>
  Users
</NavLink>

演示：Active NavLink Classes with React Router

【参考方案2】：

这个来自 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
      </CustomLink>
    )
  </div>

【参考方案3】：

在@agm1984's answer 上扩展： NavLinks 的解决方案没有正确更新样式，它使用来自react-router-redux 的routerReducer，对我不起作用。相反，我发现问题在于 connect 包装器使用 shouldComponentUpdate 并阻止重新呈现包含 NavLinks 的组件。

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

export default connect(mapStateToProps, null, null,  pure: false )(NavItems);

【参考方案4】：

如果您在单击链接并且路线更改时遇到您的导航菜单正常工作，但它没有正确更新，但如果您按 F5 则它工作正常，您可以这样做：

这可能是因为您正在使用 Redux，它的 connect 函数上有一个 shouldComponentUpdate Lifecycle 方法。您可能将 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 来自哪里，它来自您组合减速器的文件，您会看到如下内容：

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 用于漂亮的 Baller 导航链接：

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。这是您研究网络可访问性和基础font-size: 10px; 的绝佳机会。

保持健康，玩得开心。

【讨论】：

If you are linking to "/", put exact prop on NavLink. 这很有用！ THX

【参考方案5】：

一切都还是一样。但是，react-router-dom v4 将 Link 替换为 NavLink

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

【参考方案6】：

您可以在react-router v4 中使用NavLink 来做到这一点

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

【参考方案7】：

使用 NavLink 代替 Link。它没有记录，但它的工作如您所料。 https://github.com/ReactTraining/react-router/issues/4318

2017 年 5 月 17 日更新：

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

【讨论】：

文档现在在这里：reacttraining.com/react-router/#navlink

如果你使用 React Router，你必须使用这个github.com/ReactTraining/react-router/blob/master/packages/…