ReactJS – 标记上的未知道具`activeClassName`.从元素中删除此prop

我正在使用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')
);

当我浏览/关于,我收到此错误：

“Warning: UnkNown prop activeClassName on tag. Remove this prop from the element.

我在这做错了什么？

谢谢！

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'