W250511/19.React/高阶/project2/src/pages/Home.jsx

import { Link, NavLink, Outlet } from "react-router-dom";
import './home.css';
function Home() {
    const handleStyle = ({ isActive, isPending }) => isPending ? 'pending' : isActive ? 'active' : 'link';
    return <div>
        <h1 className="pending">首页</h1>
        {/* <Link to="/list">列表</Link>
        <Link to={{
            pathname: '/login'
        }}>登录</Link> */}
       <div className="nav">
         <NavLink className={handleStyle} to={{
            pathname: '/list'
        }}>列表</NavLink>
        <NavLink className={handleStyle} to="/login">登录</NavLink>
       </div>
       {/* <div className="main">
        <Outlet></Outlet>
       </div> */}
    </div>
}
export default Home;