Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ReactJS - Unknown prop `activeClassName` on <a> tag. Remove this prop from the element

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!

like image 625
habibun Avatar asked Mar 31 '17 17:03

habibun


1 Answers

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>
like image 164
Anuj Mehta Avatar answered Oct 10 '22 20:10

Anuj Mehta