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'