react 如何跳转
使用 React Router 进行页面跳转
React 应用中通常使用 react-router-dom 库实现页面跳转。以下是几种常见的跳转方式：
安装依赖
npm install react-router-dom声明式导航（Link 组件）
import { Link } from 'react-router-dom';
function NavBar() {
return (
<Link to="/about">关于页面</Link>
);
}编程式导航（useNavigate Hook）
import { useNavigate } from 'react-router-dom';
function HomePage() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/profile'); // 跳转到指定路径
navigate(-1); // 返回上一页
navigate('/user', { replace: true }); // 替换当前历史记录
};
return <button onClick={handleClick}>跳转</button>;
}路由参数传递
URL 参数跳转
navigate(`/user/${userId}`); // 跳转时携带参数查询参数跳转
navigate('/search?keyword=react'); // 通过URL查询字符串传参状态参数跳转
navigate('/profile', {
state: { user: currentUser }
});路由配置示例
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={<UserProfile />} />
</Routes>
</BrowserRouter>
);
}重定向处理
使用 Navigate 组件实现自动跳转：
import { Navigate } from 'react-router-dom';
function PrivateRoute() {
const isAuth = checkAuth();
return isAuth ? <Dashboard /> : <Navigate to="/login" />;
}注意事项
- 确保所有跳转目标路径已在路由配置中正确定义
- 编程式导航通常在事件处理函数或 useEffect 中使用
- 使用 TypeScript 时可对路由参数进行类型定义
- 嵌套路由需要配置对应的嵌套 Route 结构
以上方法覆盖了 React 应用中大多数路由跳转场景，可根据具体需求选择合适的方式。
