react怎么实现跳转
React 实现跳转的方法
在 React 中实现页面跳转可以通过多种方式完成，以下是几种常见的方法：
使用 react-router-dom 的 Link 组件
react-router-dom 是 React 生态中最常用的路由库，通过 Link 组件可以实现声明式导航。
import { Link } from "react-router-dom";
function App() {
return (
<Link to="/target-page">跳转到目标页</Link>
);
}使用 react-router-dom 的 useNavigate Hook
在函数组件中，可以通过 useNavigate Hook 实现编程式导航。
import { useNavigate } from "react-router-dom";
function App() {
const navigate = useNavigate();
const handleClick = () => {
navigate("/target-page");
};
return (
<button onClick={handleClick}>跳转到目标页</button>
);
}使用 window.location 进行原生跳转
如果项目未使用 react-router-dom，可以直接通过原生 JavaScript 的 window.location 实现跳转。
function App() {
const handleClick = () => {
window.location.href = "/target-page";
};
return (
<button onClick={handleClick}>跳转到目标页</button>
);
}使用 Navigate 组件进行重定向
在特定条件下（如登录状态检查），可以通过 Navigate 组件实现自动跳转。
import { Navigate } from "react-router-dom";
function App() {
const isLoggedIn = false;
if (!isLoggedIn) {
return <Navigate to="/login" replace />;
}
return <div>欢迎页面</div>;
}传递参数跳转
跳转时可以携带参数，例如通过 URL 参数或状态传递。
import { useNavigate } from "react-router-dom";
function App() {
const navigate = useNavigate();
const handleClick = () => {
navigate("/target-page", { state: { id: 1 } });
};
return (
<button onClick={handleClick}>跳转到目标页（带参数）</button>
);
}动态路由跳转
如果目标页面是动态路由（如 /user/:id），可以通过模板字符串拼接路径。
import { useNavigate } from "react-router-dom";
function App() {
const navigate = useNavigate();
const userId = 123;
const handleClick = () => {
navigate(`/user/${userId}`);
};
return (
<button onClick={handleClick}>跳转到用户页</button>
);
}以上方法覆盖了 React 中常见的跳转场景，根据项目需求选择合适的方式即可。
