快捷導(dǎo)航

react 路由跳轉(zhuǎn)的7種方式實(shí)現(xiàn)

更新時(shí)間：2025年03月02日 08:29:15 作者：阿麗塔~

本文介紹了React中六種常見(jiàn)的路由跳轉(zhuǎn)方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 使用 <Link> 組件
2. 使用 <NavLink> 組件
3. 使用 useHistory 鉤子（React Router v5）
4. 使用 useNavigate 鉤子（React Router v6）
5. 使用 <Redirect> 組件（React Router v5）
6. 使用 navigate 函數(shù)（React Router v6）
7. 使用 history 對(duì)象（自定義路由庫(kù)）
總結(jié)

在 React 中，路由跳轉(zhuǎn)通常通過(guò) react-router-dom（或類(lèi)似的路由庫(kù)）來(lái)實(shí)現(xiàn)。以下是幾種常見(jiàn)的路由跳轉(zhuǎn)方式：

1. 使用 <Link> 組件

<Link> 是最簡(jiǎn)單的路由跳轉(zhuǎn)方式，它會(huì)生成一個(gè) <a> 標(biāo)簽，點(diǎn)擊后可以導(dǎo)航到指定的路由，而不會(huì)重新加載頁(yè)面。

import { Link } from "react-router-dom";

function App() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/about">Go to About</Link>
    </div>
  );
}

特點(diǎn)：

適合用于頁(yè)面級(jí)的導(dǎo)航。
不會(huì)觸發(fā)頁(yè)面重新加載，而是通過(guò) React Router 的內(nèi)部機(jī)制更新頁(yè)面內(nèi)容。

2. 使用 <NavLink> 組件

<NavLink> 是 <Link> 的一個(gè)變體，它會(huì)在當(dāng)前路由匹配時(shí)自動(dòng)添加一個(gè)樣式類(lèi)（如 active），非常適合用于導(dǎo)航欄。

import { NavLink } from "react-router-dom";

function App() {
  return (
    <nav>
      <NavLink to="/" exact activeClassName="active">
        Home
      </NavLink>
      <NavLink to="/about" activeClassName="active">
        About
      </NavLink>
    </nav>
  );
}

特點(diǎn)：

與 <Link> 類(lèi)似，但提供了額外的樣式控制。
適合用于導(dǎo)航欄或側(cè)邊欄。

3. 使用 useHistory 鉤子（React Router v5）

在 React Router v5 中，useHistory 鉤子可以用于編程式導(dǎo)航。它允許你在代碼中控制路由跳轉(zhuǎn)。

import { useHistory } from "react-router-dom";

function LoginButton() {
  const history = useHistory();

  const handleClick = () => {
    history.push("/dashboard");
  };

  return <button onClick={handleClick}>Login</button>;
}

特點(diǎn)：

適合在事件處理函數(shù)中進(jìn)行路由跳轉(zhuǎn)。
可以傳遞查詢(xún)參數(shù)或狀態(tài)。

4. 使用 useNavigate 鉤子（React Router v6）

在 React Router v6 中，useHistory 被替換為 useNavigate，功能類(lèi)似但更簡(jiǎn)潔。

import { useNavigate } from "react-router-dom";

function LoginButton() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/dashboard");
  };

  return <button onClick={handleClick}>Login</button>;
}

特點(diǎn)：

替代了 v5 中的 useHistory。
更簡(jiǎn)潔的 API 設(shè)計(jì)。

5. 使用 <Redirect> 組件（React Router v5）

<Redirect> 是一種在組件中實(shí)現(xiàn)路由跳轉(zhuǎn)的方式，通常用于條件渲染。它會(huì)在渲染時(shí)直接跳轉(zhuǎn)到指定路由。

import { Redirect } from "react-router-dom";

function PrivateRoute({ isLoggedIn }) {
  return isLoggedIn ? <Dashboard /> : <Redirect to="/login" />;
}

特點(diǎn)：

適合用于權(quán)限控制或條件跳轉(zhuǎn)。
在 React Router v6 中，<Redirect> 被移除，推薦使用 navigate 或其他方式替代。

6. 使用 navigate 函數(shù)（React Router v6）

在 React Router v6 中，navigate 函數(shù)不僅可以用于編程式導(dǎo)航，還可以實(shí)現(xiàn)相對(duì)路徑跳轉(zhuǎn)。

import { useNavigate } from "react-router-dom";

function GoBackButton() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(-1); // 返回上一頁(yè)
  };

  return <button onClick={handleClick}>Go Back</button>;
}

特點(diǎn)：

支持相對(duì)路徑跳轉(zhuǎn)（如 navigate(-1) 返回上一頁(yè)）。
更靈活的路由控制。

7. 使用 history 對(duì)象（自定義路由庫(kù)）

如果你使用的是自定義路由庫(kù)（如 history），可以通過(guò) history.push 或 history.replace 方法實(shí)現(xiàn)跳轉(zhuǎn)。

import { useHistory } from "history";

function LoginButton() {
  const history = useHistory();

  const handleClick = () => {
    history.push("/dashboard");
  };

  return <button onClick={handleClick}>Login</button>;
}

特點(diǎn)：