当前位置：首页 > React

react如何写跳转

2026-01-24 08:02:37React

使用 React Router 进行页面跳转

React 应用中通常使用 react-router-dom 库实现页面跳转。以下是几种常见的跳转方式：

安装依赖包

npm install react-router-dom

在根组件中配置路由

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

编程式导航跳转

在函数组件中使用 useNavigate hook

react如何写跳转

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

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

  const handleClick = () => {
    // 跳转到 about 页面
    navigate('/about');

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

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

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

声明式导航跳转

使用 Link 组件

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

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/user/123">User Profile</Link>
    </nav>
  );
}

路由参数传递和获取

定义带参数的路由

react如何写跳转

<Route path="/user/:id" element={<User />} />

在目标组件中获取参数

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

function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

获取路由状态

使用 useLocation 获取路由状态

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

function About() {
  const location = useLocation();
  const state = location.state; // 获取 navigate 传递的 state

  return <div>Received state: {state?.id}</div>;
}

重定向

使用 Navigate 组件进行重定向

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

function ProtectedRoute({ isLoggedIn, children }) {
  if (!isLoggedIn) {
    return <Navigate to="/login" replace />;
  }
  return children;
}

这些方法覆盖了 React 应用中常见的路由跳转场景，可以根据具体需求选择合适的方式实现页面导航功能。