ReactJS-неизвестный prop 'activeClassName' на теге. Удалить эту опору из элемента

Я использую react 15.4.2 и react-router4.0.0 и этот проект был загружен с Создать 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')
);

при переходе /about, Я получаю эту ошибку:

"предупреждение: неизвестный реквизит activeClassName на тег. Удалите эту опору из элемента.

что я здесь делаю не так?

спасибо!

2 ответов


на activeClassName свойство не является свойством ссылки, а 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'

activeClassName не является собственностью Link но NavLink.

так как react-маршрутизатор beta8 В4 недвижимость active по умолчанию. Проверьте, какая версия установлена в папке модулей узла