react-router之路由跳转

以当前博客内容为例 点击

基本语法

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

1. <Link>组件
2. <NavLink>组件
   • 与<Link>组件功能相同
   • 但是他可以调整样式style或className可以接收一个函数
3. 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>
    </>
  );
}