react页面跳转怎么实现
React页面跳转的实现方法
在React中实现页面跳转有多种方式，具体取决于使用的路由库和场景需求。以下是常见的实现方法：
使用react-router-dom的Link组件
import { Link } from 'react-router-dom';
<Link to="/target-path">跳转到目标页</Link>使用useNavigate钩子（React Router v6）
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path');
// 带参数跳转
navigate('/target-path', { state: { id: 123 } });
};
return <button onClick={handleClick}>跳转</button>;
}使用history.push（React Router v5及以下）
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleClick = () => {
history.push('/target-path');
};
return <button onClick={handleClick}>跳转</button>;
}编程式导航带参数
// 传递state参数
navigate('/target', { state: { key: 'value' } });
// 传递查询参数
navigate('/target?name=value');
// 接收参数
const location = useLocation();
const stateData = location.state;
const searchParams = new URLSearchParams(location.search);重定向使用Navigate组件
import { Navigate } from 'react-router-dom';
function ProtectedRoute() {
const isAuth = false;
return isAuth ? <MyPage /> : <Navigate to="/login" replace />;
}路由配置中的redirect
// React Router v6
const router = createBrowserRouter([
{
path: '/',
element: <Root />,
children: [
{ index: true, element: <Home /> },
{ path: 'old-path', loader: () => redirect('/new-path') }
]
}
]);注意事项
- 确保应用已被BrowserRouter或类似组件包裹
- replace属性可控制是否添加历史记录（默认push）
- 动态路由参数需在目标组件中通过useParams获取
- 保持路由版本与API使用方式一致
以上方法覆盖了React应用中大多数页面跳转场景，从声明式导航到编程式控制都能满足需求。根据项目使用的React Router版本选择对应API即可实现高效路由跳转。
