react 如何写页面跳转

页面跳转的实现方式

在React中实现页面跳转可以通过多种方式，以下是常见的几种方法：

使用React Router的<Link>组件

React Router是React生态中最常用的路由库，通过<Link>组件可以实现声明式导航。

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

function App() {
  return (
    <div>
      <Link to="/about">关于我们</Link>
    </div>
  );
}

使用useNavigate钩子

React Router v6引入了useNavigate钩子，适用于编程式导航场景。

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

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

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

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

使用window.location

原生JavaScript方式，会触发页面完全刷新。

function RedirectButton() {
  const redirect = () => {
    window.location.href = '/about';
  };

  return <button onClick={redirect}>原生跳转</button>;
}

使用<Redirect>组件

在React Router v5及以下版本可以使用重定向组件。

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

function ProtectedPage({ isLoggedIn }) {
  if (!isLoggedIn) {
    return <Redirect to="/login" />;
  }
  return <div>受保护内容</div>;
}

动态路由跳转

传递参数时可以使用以下方式：

// 使用useNavigate传递state
navigate('/user', { state: { id: 123 } });

// 或通过URL参数
navigate('/user/123');

路由配置基础示例

典型的路由配置示例：

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

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

注意事项

• React Router v6与v5有重大API变更，需注意版本兼容性
• 编程式导航通常在事件处理或异步操作后使用
• 声明式导航更适合静态链接场景
• 使用原生跳转会丢失React应用状态

根据具体场景选择合适的方式，React Router的方案能保持单页应用的特性，避免页面完全刷新。