react怎样实现页面跳转
使用 React Router 进行页面跳转
React Router 是 React 生态中最常用的路由库，适用于单页面应用（SPA）的页面跳转。安装 React Router DOM 包后，可以通过以下方式实现跳转：
npm install react-router-dom在项目中配置路由，使用 BrowserRouter 和 Routes 定义路由规则：
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}使用 Link 组件导航
在组件内部使用 Link 组件实现无刷新跳转：
import { Link } from "react-router-dom";
function Home() {
return (
<div>
<Link to="/about">跳转到关于页面</Link>
</div>
);
}编程式导航
通过 useNavigate Hook 在事件处理中实现跳转：
import { useNavigate } from "react-router-dom";
function Home() {
const navigate = useNavigate();
const handleClick = () => {
navigate("/about");
};
return (
<button onClick={handleClick}>跳转</button>
);
}动态路由跳转
传递参数到目标页面，通过路由配置和 useParams 获取参数：
<Route path="/user/:id" element={<UserProfile />} />
// 跳转时传递参数
navigate("/user/123");
// 在目标组件中获取参数
import { useParams } from "react-router-dom";
function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}重定向操作
使用 Navigate 组件或 navigate 函数实现重定向：
import { Navigate } from "react-router-dom";
function ProtectedRoute() {
const isAuthenticated = false;
return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
}跳转时传递状态
通过 state 属性传递数据，目标页面通过 useLocation 获取：
navigate("/about", { state: { fromHome: true } });
// 目标组件中获取状态
import { useLocation } from "react-router-dom";
function About() {
const location = useLocation();
console.log(location.state.fromHome); // true
}原生 JavaScript 跳转
非 React Router 场景下，可使用原生方法：
// 新窗口打开
window.open("/about", "_blank");
// 当前页跳转
window.location.href = "/about";注意事项
- React Router v6 使用
Routes替代旧版的Switch。 - 动态路由参数需通过
:标记，如/user/:id。 - 编程式导航的
navigate支持第二个参数配置（如replace: true替换历史记录）。
