我正在使用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'
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。