Goal:
When you press one of the menulink, the classname 'active' should be applied next to classname 'default'

If you press another and new menu link, the previous classname 'active' should be removed and the new selected menulink should have 'active' next to classname 'default'.

In other words, one single 'active' only in the code.

Problem:
How do you solve it?

Info:
*Newbie in React JS
*Please take account that you might have many menulink.

Stackblitz:
https://stackblitz.com/edit/react-router-active-inline-style-single-empacx?file=src/App.js

Thank you!

import React from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  NavLink,
} from 'react-router-dom';
import './style.css';

const Users = () => <div>Users</div>;
const Posts = () => <div>Posts</div>;

const App = () => {
  return (
    <div className="app">
      <Router>
        <div className="nav">
          <div className="default">
            <NavLink
              to="users"
              className={({ isActive }) =>
                ''   (isActive ? ' action' : ' inAction')
              }
            >
              Users
            </NavLink>
          </div>
          <br />
          <div className="default">
            <NavLink
              to="posts"
              className={({ isActive }) =>
                ''   (isActive ? ' action' : ' inAction')
              }
            >
              Posts
            </NavLink>
          </div>
        </div>
        <Routes>
          <Route path="users" element={<Users />} />
          <Route path="posts" element={<Posts />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

@import url('https://fonts.googleapis.com/css2?family=Bree Serif&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Bree Serif';
}

body {
  background: #f0f0f0;
}

a {
  text-decoration: none;
}

.app {
  background: #fff;
  margin: 25px auto;
  padding: 25px;
  max-width: 800px;
  width: 95%;
}

.nav {
  margin-bottom: 25px;
}

.nav a {
  border-radius: 4px;
  padding: 6px 10px;
  margin-right: 10px;
}

.nav a.active {
  color: #fff;
  background: #7600dc;
}
.nav a.inactive {
  font-style: italic;
}

.action {
  color: #fff;
  background: #7600dc;
}

.inAction {
  color: #545e6f;
  background: #f0f0f0;
}

.active {
  background-color: yellow;
}

.default {
  padding-top: 10px;
  padding-bottom: 10px;
}

CodePudding user response：

If you are using NavLink, it has a property activeClassName where you can specify which class should be added when the link is active

CodePudding user response：

The working code from my project:

<NavLink
    to={props.link}
    end={props.end}
    className={({ isActive }) =>
        'link'   (isActive ? ' active' : '')
    }
>
    {props.children}
</NavLink>

and in css file:

.link {
    //basic link styles
}
.active {
    //active link styles (remains until next link is selected)
}

if you need to add hover style and style for link click moment also add to link class in css:

.link:hover {
    //hover styles
}
.link:active {
    // styles for the moment when you click the link
}