3.react路由高亮

首先引入NavLink组件

然后将Link标签替换成NavLink标签

默认高亮的样式是active 然后我们定义css样式

.active {
	color: red;
}

这时候效果就已经出来了

如我我们想要自定义class样式，我们需要吧className写成一个函数，要求函数需要有返回值

// App.js
import './App.css';
import { NavLink, Route,Routes ,Navigate } from 'react-router-dom';    // 路由插件
 
 import HOME from "./pages/home";
 import ABOUT from "./pages/about";
 
function App() {
  return (
    <div>
		<NavLink to='/home'>首页</NavLink>
		<NavLink to='/about'>分类</NavLink>
		<br />
		<Routes>
			<Route className={({ isActive }) => isActive ? 'peiqi' : 'list-group-item'} path='/home' element={<HOME />}></Route>
			<Route path='/about' element={<ABOUT />}></Route>
			<Route path='/' element={<Navigate to='/home' />}></Route>
		</Routes>
    </div >
  );
}
 
export default App;