基本语法

一般有三种方式进行路由的跳转

<Link>组件
<NavLink>组件
- 与<Link>组件功能相同
- 但是他可以调整样式style或className可以接收一个函数
useNavigate钩子函数

`<Link>`组件

在上面的例子中我们就使用了<Link>组件进行跳转，官网说明点击

 <Link to="/about">About</Link>

官网中的参数说明

 replace?: boolean;
 state?: any;
 to: To;
 reloadDocument?: boolean;

一般路由跳转都会跟这三个参数

`<NavLink>`组件

官网

当前组件可以识别到当前的路由是否是激活的路由

className

function Home() {
  let activeClassName = "underline";
  return (
    <>
    ...
      <nav>
        {/* <Link to="/about">About</Link> */}
        <NavLink 
          to="/about"
          className={({ isActive }) =>isActive ? activeClassName : undefined}
        >About</NavLink>
      </nav>
    </>
  );
}

style

function About() {
  let activeStyle = {
    textDecoration: "underline",
  };
  return (
    <>
      <main>
      ...
      </main>
      <nav>
        {/* <Link to="/">Home</Link> */}
        <NavLink 
          to="/"
          style={({ isActive }) => isActive ? activeStyle : undefined}
        >Home</NavLink>
      </nav>
    </>
  );
}

编程式路由跳转

我们一般通过useNavigate方法进行跳转,点击

function About() {
  const navigate = useNavigate()
  const handelClickToHome = () => {
    navigate("/")
  }

  return (
    <>
    ...
      <nav>
        <button onClick={handelClickToHome}>Home</button>
      </nav>
    </>
  );
}