当前位置：首页 > React

react实现跳转

2026-01-26 16:14:17React

使用 `react-router-dom` 实现页面跳转

react-router-dom 是 React 生态中常用的路由库，支持声明式和编程式跳转。

安装依赖
确保项目已安装 react-router-dom：

npm install react-router-dom

声明式跳转（<Link> 组件）
通过 <Link> 组件实现点击跳转，类似 HTML 的 <a> 标签：

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

function App() {
  return (
    <Link to="/target-path">跳转到目标页</Link>
  );
}

编程式跳转（useNavigate Hook）
在事件处理函数中通过 useNavigate 实现跳转：

react实现跳转

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

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

  const handleClick = () => {
    navigate('/target-path'); // 跳转到指定路径
    // navigate(-1); // 返回上一页
  };

  return <button onClick={handleClick}>跳转</button>;
}

路由配置（`<BrowserRouter>` 和 `<Routes>`）

在根组件中配置路由规则，确保跳转路径有效：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import TargetPage from './TargetPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/target-path" element={<TargetPage />} />
      </Routes>
    </BrowserRouter>
  );
}

动态路由跳转

支持传递参数到目标页面，例如 ID 或查询参数。

路径参数
定义动态路由并传递参数：

react实现跳转

// 路由配置
<Route path="/user/:id" element={<UserPage />} />

// 跳转时传递参数
navigate('/user/123'); 

// 目标页面获取参数
import { useParams } from 'react-router-dom';
const { id } = useParams(); // id = '123'

查询参数（URLSearchParams）
通过 URL 查询字符串传递参数：

navigate('/search?keyword=react');

// 目标页面获取参数
import { useSearchParams } from 'react-router-dom';
const [searchParams] = useSearchParams();
const keyword = searchParams.get('keyword'); // 'react'

其他跳转方式

window.location（不推荐）
直接修改浏览器地址，但会触发页面刷新，破坏 SPA 体验：

window.location.href = '/target-path';

重定向（<Navigate> 组件）
在渲染时自动跳转，适合权限控制等场景：

import { Navigate } from 'react-router-dom';

function ProtectedPage() {
  const isAuth = false;
  return isAuth ? <div>授权内容</div> : <Navigate to="/login" />;
}