当前位置：首页 > React

react如何实现界面跳转

2026-03-11 05:00:37React

路由库的选择

React本身不包含内置路由功能，需要借助第三方库。react-router-dom是当前最主流的选择，适用于Web应用。对于React Native项目，需使用react-router-native。

基本路由配置

安装react-router-dom后，在入口文件或根组件中配置路由。BrowserRouter或HashRouter作为顶层组件包裹应用，Route组件定义路径与组件的映射关系。

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

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

导航方式实现

使用Link组件实现声明式导航，适合菜单或按钮跳转。编程式导航通过useNavigate钩子实现，适用于表单提交等场景。

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

// 声明式导航
<Link to="/about">关于我们</Link>

// 编程式导航
const navigate = useNavigate();
navigate('/contact', { state: { fromDashboard: true } });

动态路由与参数传递

通过冒号语法定义动态段，useParams获取参数。state属性可传递复杂对象，useLocation读取。

<Route path="/users/:id" element={<UserDetail />} />

// 组件内获取参数
const { id } = useParams();
const location = useLocation();
const stateData = location.state;

嵌套路由布局

通过Outlet组件实现嵌套视图，父路由定义子路由出口。保持布局结构同时切换子内容。

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="settings" element={<DashboardSettings />} />
</Route>

// DashboardLayout组件包含
<Outlet />

路由守卫与权限控制

封装自定义路由组件，结合认证状态实现权限控制。未登录用户重定向到登录页。

function PrivateRoute({ children }) {
  const auth = useAuth();
  return auth ? children : <Navigate to="/login" />;
}

// 使用方式
<Route path="/admin" element={<PrivateRoute><AdminPage /></PrivateRoute>} />

404页面处理

通配符路径匹配所有未定义路由，展示自定义404组件。需放在路由配置最后。

<Route path="*" element={<NotFoundPage />} />

路由动画过渡

结合react-transition-group或Framer Motion实现转场动画。通过监听location变化触发动画效果。

react如何实现界面跳转

import { AnimatePresence } from 'framer-motion';

<AnimatePresence mode="wait">
  <Routes location={location} key={location.key}>
    {/* 路由配置 */}
  </Routes>
</AnimatePresence>