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