react如何实现路由跳转

React 路由跳转的实现方法

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

使用 Link 组件导航

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

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

使用 useNavigate Hook 编程式导航

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

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

  const handleClick = () => {
    navigate('/target-path');
    // 或者带状态跳转
    navigate('/target-path', { state: { data: 'value' } });
  };

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

使用 useHistory (v5 及以下版本)

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

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

  const handleClick = () => {
    history.push('/target-path');
    // 或者替换当前路由
    history.replace('/target-path');
  };

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

路由配置基础示例

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

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

动态路由参数传递

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

// 在目标组件中获取参数
import { useParams } from 'react-router-dom';

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

路由守卫实现

function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth(); // 自定义认证检查
  return isAuthenticated ? children : <Navigate to="/login" />;
}

// 使用
<Route
  path="/dashboard"
  element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  }
/>

导航时传递状态

navigate('/target', {
  state: { from: location.pathname, data: 'extra-info' }
});

// 在目标组件中获取状态
import { useLocation } from 'react-router-dom';

function TargetComponent() {
  const location = useLocation();
  const { from, data } = location.state || {};
}

以上方法覆盖了 React 路由跳转的主要场景，可以根据项目需求选择合适的实现方式。对于新项目，推荐使用 react-router-dom v6 及以上版本。