我正在使用react 15.4.2和react-router4.0.0,这个项目是用
Create React App引导的.
@H_403_1@这是我的代码.
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')
);
@H_403_1@当我浏览/关于,我收到此错误：
@H_403_1@“Warning: Unknown prop activeClassName on tag. Remove this prop from the element.
@H_403_1@我在这做错了什么？
@H_403_1@谢谢！
activeClassName属性不是Link的属性,而是NavLink的属性.
@H_403_1@因此,只需将代码更改为使用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>
)
@H_403_1@记得从react-router-dom导入NavLink：
import { NavLink } from 'react-router-dom'
