Reactjs 无法将类赋予react中的当前链接

我在导航菜单中有一些链接，可以输出html，如下所示：

<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/subs">Subs</a>
</li>
</ul>

以下是组件：

import React, {Component} from "react";
import {Link} from "react-router-dom";
import {navLinks} from "../util/nav-links";

export default class NavMenu extends React.Component {
  render() {
    var isActive = this.context.router.route.location.pathname === this.props.to;
    var className = isActive ? 'active' : '';

    const lis = navLinks.map(link => (
      <li>
        <Link className={className} to={link.href} key={link.href}>{link.name}</Link>
      </li>
      )
    )

    return (
      <div id="navbar">
        <ul>
          {lis}
        </ul>
      </div>
    )
  }
}

为什么会发生这种错误？如果删除了两个变量isActive和className以及link标记中的className，则代码可以工作。另外，如果有更好的方法来实现这一点，那么还有其他方法吗

---

谢谢你的帮助。Stackblitz演示：

您提供的链接中的2个选项适用于您：

选项1马特的回答：

React路由器V4附带了一个现成的组件 要使用，只需将activeClassName属性设置为已适当设置样式的类，或直接将activeStyle设置为所需的样式。有关更多详细信息，请参阅

你好

选项2幽灵克拉维斯的回答：

导出默认类Navbar扩展React.Component{ 渲染{ const{location}=this.props； const homeClass=location.pathname==/？活动：； const aboutClass=location.pathname.match/^\/about/？active:； const contactClass=location.pathname.match/^\/contact/？active:； 回来 家 关于 联系 }不要使用Link组件，而是使用react路由器dom中的NavLink组件。NavLink组件采用名为activeClassName的道具，其值为将用于样式设置的类，以指示哪个导航链接处于活动状态

<NavLink activeClassName="active" to={link.href} exact>{link.name}</NavLink>

还请注意，使用NavLink组件将不再需要NavMenu组件中的以下两条语句

var isActive = this.context.router.route.location.pathname === this.props.to;
var className = isActive ? 'active' : '';

---

您可以将代码修改为接受而不是链接，并且可以删除在render方法中生成活动类的所有相关代码

更改如下：

import {Link} from "react-router-dom";

致：

那么

分岔闪电战：

---

对我来说，有效的方法是使用NavLink，因为它有这个活动类属性

<NavLink to="/" activeClassName="active">
  Home
</NavLink>

<NavLink to="/store" activeClassName="active">
 Store
</NavLink>

<NavLink to="/about" activeClassName="active">
 About Us
</NavLink>

首先导入它

import { NavLink } from 'react-router-dom';

使用activeClassName获取活动类属性

<NavLink to="/" activeClassName="active">
  Home
</NavLink>

<NavLink to="/store" activeClassName="active">
 Store
</NavLink>

<NavLink to="/about" activeClassName="active">
 About Us
</NavLink>

import { NavLink } from 'react-router-dom';

<Link className={className} to={link.href} key={link.href}>{link.name}</Link>

<NavLink exact activeClassName="active" to={link.href} key={link.href}>{link.name}</NavLink>

import React, {Component} from "react";
import { NavLink } from 'react-router-dom';
import {navLinks} from "../util/nav-links";

export default class NavMenu extends React.Component {
  render() {
    const lis = navLinks.map(link => (
      <li>
        <NavLink exact activeClassName="active" to={link.href} key={link.href}>{link.name}</NavLink>
      </li>
      )
    )

    return (
      <div id="navbar">
        <ul>
          {lis}
        </ul>
      </div>
    )
  }
}

.
.
.

.active {
   color: #13aa52 !important;
}

import { NavLink } from 'react-router-dom';

<NavLink to="/" activeClassName="active">
  Home
</NavLink>

<NavLink to="/store" activeClassName="active">
 Store
</NavLink>

<NavLink to="/about" activeClassName="active">
 About Us
</NavLink>

.active{
   color:#fcfcfc;
 }