react中页面如何实现跳转

路由跳转（React Router）

在React中实现页面跳转通常使用React Router库。React Router提供了<Link>组件和useNavigate钩子来实现导航功能。

安装React Router：

npm install react-router-dom

使用<Link>组件：

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

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

使用useNavigate钩子：

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

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

  return (
    <button onClick={() => navigate('/about')}>
      跳转到关于页面
    </button>
  );
}

编程式导航

通过编程方式控制导航，可以使用useNavigate钩子提供的各种方法：

const navigate = useNavigate();

// 基本跳转
navigate('/target-path');

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

// 带状态的跳转
navigate('/target-path', {
  state: { from: 'current-page' }
});

// 前进/后退
navigate(1);  // 前进
navigate(-1); // 后退

动态路由跳转

处理动态路由参数时，可以使用模板字符串或对象形式：

// 跳转到用户详情页
navigate(`/user/${userId}`);

// 或者使用对象形式
navigate({
  pathname: '/user',
  search: `?id=${userId}`
});

路由配置

需要在应用顶层配置路由：

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/user/:id" element={<UserPage />} />
      </Routes>
    </BrowserRouter>
  );
}

重定向处理

使用<Navigate>组件实现条件重定向：

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

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

路由守卫

实现认证检查等路由守卫功能：

function PrivateRoute() {
  const auth = useAuth();
  const location = useLocation();

  if (!auth.user) {
    return <Navigate to="/login" state={{ from: location }} />;
  }
  return <Outlet />;
}

路由传参

通过多种方式传递参数：

// 通过state传递
navigate('/target', { state: { data: value } });

// 通过URL参数传递
navigate('/target?key=value');

// 在目标组件中获取
const location = useLocation();
const stateData = location.state?.data;
const searchParams = new URLSearchParams(location.search);
const paramValue = searchParams.get('key');

路由动画

为路由跳转添加过渡动画：

import { AnimatePresence, motion } from 'framer-motion';

<AnimatePresence>
  <Routes location={location} key={location.key}>
    <Route path="/" element={
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      >
        <HomePage />
      </motion.div>
    } />
  </Routes>
</AnimatePresence>

嵌套路由

实现嵌套路由结构：

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="dashboard" element={<Dashboard />} />
  </Route>
</Routes>

在Layout组件中使用<Outlet />渲染子路由：

function Layout() {
  return (
    <div>
      <Navbar />
      <Outlet />
      <Footer />
    </div>
  );
}