react实现跳转页面
React 实现页面跳转的常用方法
在 React 中实现页面跳转可以通过多种方式，以下是几种常见的方法：
使用 React Router 的 Link 组件
React Router 是 React 生态中最常用的路由库，通过 Link 组件可以实现声明式导航：
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/target-page">跳转到目标页面</Link>
);
}使用 useNavigate Hook（React Router v6）
在函数组件中，可以使用 useNavigate Hook 进行编程式导航：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-page');
};
return (
<button onClick={handleClick}>跳转</button>
);
}使用 history.push（React Router v5）
在旧版本的 React Router 中，可以通过 history 对象实现跳转：
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleClick = () => {
history.push('/target-page');
};
return (
<button onClick={handleClick}>跳转</button>
);
}使用原生 JavaScript 的 window.location
如果项目中没有使用 React Router，可以通过原生 JavaScript 实现跳转：
function MyComponent() {
const handleClick = () => {
window.location.href = '/target-page';
};
return (
<button onClick={handleClick}>跳转</button>
);
}使用 Navigate 组件（重定向）
在某些场景下，可能需要条件触发跳转，可以使用 Navigate 组件：
import { Navigate } from 'react-router-dom';
function MyComponent() {
const shouldRedirect = true;
if (shouldRedirect) {
return <Navigate to="/target-page" replace />;
}
return <div>当前页面内容</div>;
}注意事项
- 使用 React Router 时，确保路由配置正确，包括
BrowserRouter或HashRouter的包裹。 - 编程式导航可以传递状态参数，例如
navigate('/target', { state: { id: 1 } })。 - 原生
window.location会导致页面刷新，而 React Router 的导航不会刷新页面。
根据项目需求选择合适的方法，React Router 提供了更灵活的路由控制和更好的用户体验。
