react如何跳到另一个页面
使用 React Router 进行页面跳转
React 应用中通常使用 react-router-dom 库实现页面跳转。确保已安装该库：
npm install react-router-dom在项目中配置路由，通常在 App.js 或根组件中定义路由规则：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}使用 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'); // 跳转到关于页面
// navigate(-1); // 返回上一页
};
return (
<button onClick={handleClick}>跳转</button>
);
}带参数的跳转
传递参数到目标页面：
// 跳转时传递参数
navigate('/about', { state: { id: 123 } });
// 目标页面接收参数
import { useLocation } from 'react-router-dom';
function About() {
const location = useLocation();
const { id } = location.state;
}动态路由跳转
配置动态路由参数：
<Route path="/user/:id" element={<User />} />跳转到动态路由：
navigate('/user/456');在目标组件获取参数：
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
}
