根据菜单链接的选择显示背景颜色

Question

目标：
当您按下其中一个菜单 link 时，类名 'active' 应该应用在类名 'default'

旁边

如果您按另一个新菜单 link，则应删除先前的类名 'active'，新选择的菜单 link 应在类名 [ 旁边显示 'active' =35=].

换句话说，代码中只有一个'active'。

问题：
你是怎么解决的？

信息：
*React JS 新手
*请注意您可能有多个菜单link.

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

谢谢！

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;
}

Answer 1

如果您使用 NavLink，它有一个属性 activeClassName，您可以在其中指定当 link 处于活动状态时应添加哪个 class

Answer 2

根据，这是我的尝试：

<NavLink
    to="users"
    className={({ isActive }) =>
        'default' + (isActive ? ' active' : '')
    }
    children={({ isActive }) => {
        return (
            <div className={'' + (isActive ? ' action' : 'inAction')}>
                Users
            </div>
        );
     }}
></NavLink>

在 StackBlitz 中：https://stackblitz.com/edit/react-router-active-inline-style-single-arulrq?file=src%2FApp.js,src%2Fstyle.css

部分样式可能不同...

根据菜单链接的选择显示背景颜色

Display background color based on selection of the menulink

javascript

reactjs

react-18