ReactJS - 标签上的未知道具`activeClassName` <a>。</a> <a>从元素中移除这个道具</a>

Question

我正在使用 react 15.4.2 和 react-router4.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 。从元素中删除此道具。

我在这里做错了什么？

谢谢！

Answer 1

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'

Answer 2

从v6开始，react-router 将activeClassName替换为className并使用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>

Answer 3

在 React Router v6 中， activeClassName已更改为className ，其中一个 prop 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>
    )
}

Answer 4

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

从 react-router v4 beta8 开始，该属性默认active 。 验证您的节点模块文件夹中安装了哪个版本

Answer 5

我的问题是我正在使用reactstrap并导入他们的NavLink元素，该元素没有属性activeClassName 。 确保从 react-router 库中导入NavLink ，如下所示：

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