Question

I am using react 15.4.2 and react-router4.0.0 and This project was bootstrapped with Create React App上的未知道具`activeClassName`。

这是我的代码。

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>
)

请务必从NavLink

导入react-router-dom

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

Answer 2

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

自react-router v4 beta8起，默认情况下属性为active。验证节点模块文件夹中安装的版本

Answer 3

我的问题是我正在使用temp!=NULL&&temp->data<data并导入不具有属性reactstrap的{{1}}元素。确保像这样从react-router库导入NavLink：

activeClassName

ReactJS - <a> tag. Remove this prop from the element

3 个答案: