react中——自定义NavLink导航高亮样式（isActive）

1、准备好自定义的样式，并在index.html中引入

index.css中

.nav{
    background-color:pink !important;
    color: #fff !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
   ......
  <link rel="stylesheet" href="./css/index.css">
   ......

</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

</body>

</html>

2、使用isActive进行判断

import { NavLink, Routes, Route, Navigate } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
function App() {
  function componentCss({ isActive }) {
    return isActive ? 'list-group-item nav' : 'list-group-item'
  }
  return (
    <div className="App">
      <div>
       ......
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 路由链接处：自定义高亮样式 */}
              {/* <NavLink className={({isActive})=>{return isActive?'list-group-item nav':'list-group-item'}} to='/about'>About</NavLink> */}
              <NavLink className={componentCss} to='/about'>About</NavLink>
              <NavLink className={componentCss} to='/home'>Home</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
          ......
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;