当前位置：首页 > React

react route 如何跳转

2026-02-26 15:33:06React

React Router 跳转方法

在 React 中，使用 React Router 进行页面跳转有多种方式，以下是常见的几种方法：

使用 Link 组件

Link 是 React Router 提供的导航组件，用于声明式导航。它会在不刷新页面的情况下更新 URL 和渲染对应的组件。

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

function App() {
  return (
    <Link to="/about">About</Link>
  );
}

使用 useNavigate Hook

React Router v6 引入了 useNavigate Hook，可以在函数组件中以编程方式导航。

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

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

  const handleClick = () => {
    navigate('/about');
  };

  return (
    <button onClick={handleClick}>Go to About</button>
  );
}

传递参数

可以在跳转时传递 state 参数：

navigate('/about', { state: { id: 1 } });

在目标组件中通过 useLocation 获取：

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

function About() {
  const location = useLocation();
  const { id } = location.state;
}

替换当前历史记录

使用 replace 选项可以替换当前历史记录而不是添加新记录：

navigate('/about', { replace: true });

使用 Navigate 组件

Navigate 组件用于在渲染时立即执行导航：

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

function App() {
  return <Navigate to="/about" replace />;
}

注意事项

React Router v6 不再支持 useHistory，改为使用 useNavigate
确保组件在 BrowserRouter 或类似的路由器组件内使用
动态路由参数需要通过 useParams Hook 获取

代码示例

完整的基本路由设置示例：

react route 如何跳转

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}