NavLink高亮

NavLink 高亮

import React from "react";
import { Link, Route, Routes, Navigate, NavLink } from "react-router-dom";
// 路由组件
import Home from "./pages/Home";
import About from "./pages/About";

export default function App() {
  return (
    <div>
      <h2>React Router Demo</h2>
      <div>
        <div>
          {/* {isActive: true, isPending: false} */}
          <NavLink
            className={({ isActive }) => (isActive ? "cls1" : "cls2")}
            to="/home"
          >
            Home
          </NavLink>
          <NavLink to="/about">About</NavLink>
        </div>
        <div>
          <Routes>
            {/* 注册路由 */}
            <Route path="/home" element={<Home />} />
            <Route path="/about" element={<About />} />
            {/* 跳转到Home */}
            <Route path="/" element={<Navigate to="/home" />} />
          </Routes>
        </div>
      </div>
    </div>
  );
}