ReactJS - <a>标签上未知属性`activeClassName`。请从元素中删除此属性。

Question

我正在使用React 15.4.2和React Router 4.0.0，并且这个项目是使用Create React App启动的。

这是我的代码。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'


 const AboutPage = () => {
 return(
    <section>
        <h2>This is About page</h2>
        <Link activeClassName="active" to="/about/nestedone">Nestedone</Link>
        {' '}
        <Link activeClassName="active" to="/about/nestedtwo">Nested two</Link>
    </section>
)
}

const HomePage = () => {
return(
    <section>
        <h2>This is Home page</h2>
        <Link to="/about">About</Link>
    </section>
)
}

const NestedOne = () => {
return (
    <section>
        <h2>Nested page 1</h2>
    </section>
)
}


const NestedTwo = () => {
return (
    <section>
        <h2>Nested page 2</h2>
    </section>
)
}


 ReactDOM.render(
 <Router> 
  <section>
    <Route exact path="/" component={HomePage} />
    <Route path="/about" component={AboutPage} />
    <Route path="/about/nestedone" component={NestedOne} />
    <Route path="/about/nestedtwo" component={NestedTwo} />
 </section>
 </Router>,
  document.getElementById('root')
);

当我浏览/about时，出现以下错误：

"警告：在标签上未知的属性activeClassName。请从元素中删除此属性。

我做错了什么？

谢谢！

- habibun

---

你可能想使用 activeclassName 属性。 - Brian

我在这里https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js中根本看不到activeClassName。也许你应该使用'react-router'。 - AlexeyKuznetsov

在关于页面中，我只是试图根据我的URL设置一个活动链接，当我在/about/nestedone或/about/nestedtwo时。 - habibun

Answer 1

从 v6 版本开始，react-router 中用 className 替换 activeClassName ，并使用 navData.isActive 切换样式。

---

旧的方法：

<NavLink to="/home" activeClassName="active-style">Home</NavLink>

v6版本及以上：

<NavLink to="/home" className={(navData) => (navData.isActive ? "active-style" : 'none')}>Home</NavLink>

或者你也可以从navData中解构isActive：

 <NavLink to="/home" className={({isActive}) => (isActive ? "active-style" : 'none')}>Home</NavLink>

- Anuj Mehta

---

谢谢你的回答。它对我非常有效。我使用了null代替'none'来防止非活动类，即className={({isActive}) => (isActive ? 'active' : null)}。 - gdibble

但是你真的需要在className属性中使用所有那些代码吗？与“Link”不同，“NavLink”似乎会自动激活与链接相关联的任何样式，如果它被点击。请参见此存储库：https://codesandbox.io/s/router-63-navlink-freeze-t65hnb - Luke

我注意到你也可以在CSS中添加一个名为“active”的类，React会自动将其应用于活动的NavLink。 - Kuba Nowoszyński

Answer 2

activeClassName属性不是Link的属性，而是NavLink的属性。

所以，只需将您的代码更改为使用NavLink而不是Link：

const AboutPage = () => {
 return(
    <section>
        <h2>This is About page</h2>
        <NavLink activeClassName="active" to="/about/nestedone">Nestedone</NavLink>
        {' '}
        <NavLink activeClassName="active" to="/about/nestedtwo">Nested two</NavLink>
    </section>
)

记得从 react-router-dom 中导入 NavLink：

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

- valdeci

---

这解决了我的问题。奇怪的是，NavLink甚至没有在文档中列出：http://knowbody.github.io/react-router-docs/api/Link.html# - agm1984

即使使用 NavLink，我仍然会遇到这个错误...不确定为什么会抛出。 - captDaylight

@captDaylight，你可以分享一个Fiddle吗？ - valdeci

Answer 3

在React Router v6中，`activeClassName`已经更改为只使用`className`，其中一个名为`isActive`的属性可以用于操作样式。

了解更多信息，请访问： https://reactrouter.com/docs/en/v6/upgrading/v5#remove-activeclassname-and-activestyle-props-from-navlink-

const AboutPage = () => {
    return(
        <section>
        <h2>This is About page</h2>
        <NavLink className={({ isActive }) => isActive? "active": ''} to="/about/nestedone">Nestedone</NavLink>
        {' '}
        <NavLink className={({ isActive }) => isActive? "active": ''} to="/about/nestedtwo">Nested two</NavLink>
        </section>
    )
}

- sudarshan V Kudli

---

ReactJS升级到V6后的正确答案。 - Hossein Khalili

Answer 4

activeClassName 不是 Link 的属性，而是 NavLink 的属性。

自从 react-router v4 beta8 版本以来，默认情况下该属性是 active。请验证您的 node modules 文件夹中安装的版本。

- Damien Leroux

---

感谢，仍然活动无法正常工作，无论如何我将其降级到 3。除了 IndexRoute 之外，一切都正常工作。 - habibun

你正在从 'react-router-dom' 导入 {NavLink} 吗？ - psorensen

Answer 5

我的问题是我在使用reactstrap并导入他们的NavLink元素时，它没有activeClassName属性。请确保像这样从react-router库中导入NavLink：

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

- Justin

Answer 6

使用activeclassname而不是activeClassName，对我有用，就像这样：

<NavLink to="/home" activeclassname="active">Home</NavLink>

- DhanteyUD