react实现页面跳转方式
使用 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 阻止未保存离开：
import { unstable_useBlocker as useBlocker } from 'react-router-dom';
function EditPage() {
const [isDirty, setIsDirty] = useState(false);
useBlocker(() => isDirty, 'Changes may not be saved');
}
