react如何跳转页面

使用 react-router-dom 进行页面跳转

react-router-dom 是 React 生态中最常用的路由管理库，提供多种导航方式。

安装依赖

npm install react-router-dom

声明式导航（Link 组件）

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

function NavBar() {
  return (
    <nav>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

编程式导航（useNavigate Hook）

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

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

  const handleLogin = () => {
    // 跳转到指定路径
    navigate('/dashboard');

    // 带参数跳转
    navigate('/profile', { state: { userId: 123 } });

    // 替换当前历史记录
    navigate('/settings', { replace: true });
  };

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

使用 window.location 跳转

适用于非单页应用场景或需要完全刷新页面的情况。

基本跳转

window.location.href = 'https://example.com';

替换当前历史记录

window.location.replace('https://example.com/new-page');

使用重定向组件

在路由渲染过程中进行跳转控制。

Redirect 组件（v5）

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

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

Navigate 组件（v6）

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

function AuthGuard({ children }) {
  const isLoggedIn = checkAuth();

  return isLoggedIn 
    ? children 
    : <Navigate to="/login" replace />;
}

带参数跳转

传递 state 参数

navigate('/user', {
  state: { from: 'homepage', timestamp: Date.now() }
});

URL 查询参数

navigate('/search?query=react&page=1');

// 或使用 URLSearchParams
const params = new URLSearchParams({ query: 'react', page: 1 });
navigate(`/search?${params}`);

动态路由跳转

路径参数跳转

// 定义路由
<Route path="/users/:userId" element={<UserProfile />} />

// 跳转代码
navigate('/users/123');

导航守卫

路由拦截示例

import { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

function AuthChecker() {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuthenticated() && location.pathname !== '/login') {
      navigate('/login', { state: { from: location } });
    }
  }, [location, navigate]);

  return null;
}

浏览器历史操作

前进/后退控制

const navigate = useNavigate();

// 后退一页
navigate(-1);

// 前进一页
navigate(1);

// 后退两页
navigate(-2);