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!
The activeClassName
property is not a property of Link but of NavLink.
So, just change your code to use NavLink instead of 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>
)
Remember to import the NavLink
from the react-router-dom
:
import { NavLink } from 'react-router-dom'
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>
In React Router v6 activeClassName
has been changed to just className
where a prop isActive
can be used to manipulate the styling.
For more info
https://reactrouter.com/docs/en/v6/upgrading/v5#remove-activeclassname-and-activestyle-props-from-navlink-
const AboutPage = () => {
return(
<section>
<h2>This is About page</h2>
<NavLink className={({ isActive }) => isActive? "active": ''} to="/about/nestedone">Nestedone</NavLink>
{' '}
<NavLink className={({ isActive }) => isActive? "active": ''} to="/about/nestedtwo">Nested two</NavLink>
</section>
)
}
My issue was that I was using reactstrap
and importing their NavLink
element which does NOT have the attribute activeClassName
. Make sure you import NavLink
from the react-router library like this:
import { NavLink } from 'react-router-dom'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.