react实现点击路由跳转
使用 react-router-dom 实现路由跳转
安装 react-router-dom（若未安装）：
npm install react-router-dom在根组件（如 App.js）中配置路由：
import { BrowserRouter as Router, Routes, Route } 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">跳转到 About 页</Link>
</div>
);
}通过编程式导航跳转
使用 useNavigate 钩子实现动态跳转（如点击按钮）：
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about'); // 跳转到 About 页
};
return (
<button onClick={handleClick}>跳转到 About</button>
);
}跳转时传递参数
通过 state 或 URL 参数传递数据：
// 方法1：通过 state
navigate('/about', { state: { id: 123 } });
// 方法2：通过 URL 参数
navigate('/about?id=123');在目标页面接收参数：
// 接收 state
import { useLocation } from 'react-router-dom';
const location = useLocation();
console.log(location.state?.id); // 123
// 接收 URL 参数
import { useSearchParams } from 'react-router-dom';
const [searchParams] = useSearchParams();
console.log(searchParams.get('id')); // "123"动态路由跳转
配置动态路由参数：
<Route path="/user/:id" element={<User />} />跳转时传递动态参数：
navigate('/user/123');在目标页面获取参数：
import { useParams } from 'react-router-dom';
const { id } = useParams(); // id = "123"
