react-router-dom NavLink isActive does not work well

Question

We are working on a project using React.js. I am configuring multiple pages utilizing react-router-dom, and I want to change the currently active icon using NavLink.

icon+sel is for active page.

render() {

  const oddEvent = (match, location) => {
    if (!match) {
      console.log(!match)
      return false

    }
    else{
      console.log(!match)
    }
    const eventID = parseInt(match.params.eventID)
    return !isNaN(eventID) && eventID % 2 === 1
    console.log(eventID)
  }

  return (
      <fragment>
        <div className="bottom noright">
          <div className="bottomcontents">
            <div className="bottomicon">
                <NavLink className="bottomiconinside bottomiconinsideside" src={home} exact to="/" isActive={oddEvent}>
                <img className="iconcenter" src={!NavLink.match ? homesel : home}/>
                </NavLink>
                <NavLink className="bottomiconinside bottomiconinsideside" exact to="/about" isActive={oddEvent}>
                <img className="iconcenter" src={!NavLink.match ? searchsel : search}/>
                </NavLink>
                <NavLink className="bottomiconinside bottomiconinsideside" to="/about/foo" isActive={oddEvent} >
                <img className="iconcenter" src={!NavLink.match ? addsel : add}/>
                </NavLink>
                <NavLink className="bottomiconinside bottomiconinsideside" to="/posts" isActive={oddEvent}>
                <img className="iconcenter" src={!NavLink.match ? accountsel : account}/>
                </NavLink>
                <NavLink className="bottomiconinside bottomiconinsideside" exact to="/" isActive={oddEvent}>
                <img className="iconcenter" src={!NavLink.match ? settingsel : setting}/>
                </NavLink>
            </div>
            {/* <div className="search"></div>
            <div className="plus"></div>
            <div className="mypage"></div>
            <div className="setting"></div> */}
          </div>
        </div>
          </fragment>
    );
}

}

export default Bottom;

Answer 1

You don't need to use isActive prop of Navlink and also you are using it incorrectly. Instead, you could declare a variable isActive and change its value based on the route and then change icon src or class based on isActive flag.

Basic Code below:-

Clicking on I am inactive link will change the color to green and change the text to I am active. Similarly you could change src of image. Also you can find codesandbox working link for reference.

import React from "react";
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";

function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <NavLink to="/topics">Topics</NavLink>
          </li>
        </ul>

        <hr />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>
  );
}

class Topics extends React.Component {
  render() {
    const { match, location } = this.props;
    let isActive = false;
    if (location.pathname === `${match.url}/props-v-state`) {
      isActive = true;
    }
    return (
      <div>
        <h2>Topics</h2>
        <ul>
          <li>
            <NavLink to={`${match.url}/components`}>Components</NavLink>
          </li>
          <li>
            <NavLink
              to={`${match.url}/props-v-state`}
              activeStyle={{ color: "green" }}
            >
              <div>
                {isActive ? (
                  <span>I am active</span>
                ) : (
                  <span>I am inactive</span>
                )}
              </div>
            </NavLink>
          </li>
        </ul>

        <Route path={`${match.path}/:topicId`} component={Topic} />
        <Route
          exact
          path={match.path}
          render={() => <h3>Please select a topic.</h3>}
        />
      </div>
    );
  }
}

function Topic({ match }) {
  return (
    <div>
      <h3>{match.params.topicId}</h3>
    </div>
  );
}

export default BasicExample;

Hope that helps!!!