I am using react 15.4.2 and react-router4.0.0 and This project was bootstrapped with Create React App.
Here is my Code.
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')
);
When I browse /about
, I am getting this error:
"Warning: Unknown prop
activeClassName
on tag. Remove this prop from the element.
What am I doing wrong here?
Thanks!
From v6 onwards of react-router replace activeClassName
with className
and use navData.isActive
to toggle style.
Old way:
<NavLink to="/home" activeClassName="active-style">Home</NavLink>
v6 onwards:
<NavLink to="/home" className={(navData) => (navData.isActive ? "active-style" : 'none')}>Home</NavLink>
or you can also destructure isActive
from navData
:
<NavLink to="/home" className={({isActive}) => (isActive ? "active-style" : 'none')}>Home</NavLink>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With