当前位置：首页 > React

react实现页面跳转方式

2026-01-27 17:37:58React

使用 React Router 进行页面跳转

React Router 是 React 应用中最常用的路由管理库，提供多种导航方式。

安装 React Router：

npm install react-router-dom

声明式导航
使用 <Link> 或 <NavLink> 组件实现跳转：

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

<Link to="/about">About Page</Link>

<NavLink> 会默认添加 active 类名，适合导航菜单高亮。

编程式导航
通过 useNavigate Hook 在事件中跳转：

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

function HomePage() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/profile')}>
      Go to Profile
    </button>
  );
}

路由参数传递

URL 参数
通过动态路由定义和 useParams 获取：

// 路由配置
<Route path="/user/:id" element={<UserPage />} />

// 组件内获取
import { useParams } from 'react-router-dom';
const { id } = useParams();

查询参数
使用 URLSearchParams 处理：

navigate(`/search?keyword=${value}`);

// 获取参数
const [searchParams] = useSearchParams();
const keyword = searchParams.get('keyword');

状态传递
通过 state 属性隐式传参：

navigate('/target', { state: { fromHome: true } });

// 获取状态
const location = useLocation();
const state = location.state;

重定向处理

组件内重定向
使用 <Navigate> 组件：

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

function ProtectedRoute({ auth }) {
  return auth ? <Dashboard /> : <Navigate to="/login" />;
}

路由配置重定向
在路由配置中使用 redirect：

<Route path="/old" element={<Navigate to="/new" />} />

嵌套路由实现

通过 <Outlet> 实现布局嵌套：

// 父路由
<Route path="/admin" element={<AdminLayout />}>
  <Route path="dashboard" element={<Dashboard />} />
</Route>

// AdminLayout 组件
import { Outlet } from 'react-router-dom';
function AdminLayout() {
  return (
    <div>
      <Header />
      <Outlet />  // 子路由内容将在此渲染
    </div>
  );
}

路由守卫实现

通过高阶组件保护路由：

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

// 使用方式
<Route path="/profile" element={
  <PrivateRoute>
    <ProfilePage />
  </PrivateRoute>
} />

动态路由加载

结合 React.lazy 实现代码分割：

const AboutPage = React.lazy(() => import('./AboutPage'));

<Route 
  path="/about" 
  element={
    <React.Suspense fallback={<Loader />}>
      <AboutPage />
    </React.Suspense>
  } 
/>

路由跳转拦截

使用 useBlocker 阻止未保存离开：

react实现页面跳转方式

import { unstable_useBlocker as useBlocker } from 'react-router-dom';

function EditPage() {
  const [isDirty, setIsDirty] = useState(false);
  useBlocker(() => isDirty, 'Changes may not be saved');
}