react route 如何跳转
路由跳转的基本方法
在React Router中，路由跳转可以通过多种方式实现，包括使用<Link>组件、useNavigate钩子或编程式导航。
import { Link } from 'react-router-dom';
function MyComponent() {
return (
<Link to="/target-path">跳转到目标页面</Link>
);
}使用useNavigate钩子
useNavigate是React Router v6中引入的钩子，用于编程式导航。可以在函数组件中调用此钩子获取导航函数。
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path');
};
return (
<button onClick={handleClick}>跳转</button>
);
}传递参数
跳转时可以传递参数，例如状态或查询参数。
const handleClick = () => {
navigate('/target-path', { state: { id: 123 } });
};目标页面可以通过useLocation获取传递的状态。
import { useLocation } from 'react-router-dom';
function TargetPage() {
const location = useLocation();
const { id } = location.state;
}替换当前路由
使用replace选项可以替换当前路由而不是添加新记录。
navigate('/target-path', { replace: true });导航到上一页
可以通过navigate函数返回上一页。
navigate(-1);动态路由跳转
动态路由跳转时，路径中可以包含参数。
navigate(`/user/${userId}`);目标路由配置需要匹配动态参数。
<Route path="/user/:userId" element={<UserPage />} />路由跳转的注意事项
确保组件被<BrowserRouter>或<Router>包裹，否则路由功能无法正常工作。跳转路径应与路由配置中的路径匹配，否则可能导致404错误。
