v6路由数据流管理

v6路由数据流管理踩坑记录

升级到React Router v6后，发现路由数据流管理方式发生了重大变化。之前在v5中通过withRouter高阶组件获取路由信息，在v6中完全失效了。

核心问题：useNavigate vs useLocation

// v5写法 - 已废弃
import { withRouter } from 'react-router-dom';
const MyComponent = ({ history, location, match }) => {
  // 可以直接使用history等
};

// v6写法 - 新方式
import { useNavigate, useLocation } from 'react-router-dom';
const MyComponent = () => {
  const navigate = useNavigate();
  const location = useLocation();
  
  const handleGoBack = () => {
    navigate(-1); // 回退
  };
  
  const handleRedirect = (path) => {
    navigate(path); // 跳转
  };
};

数据传递方案

方案一：URL参数传递

// 路由配置
<Route path="/user/:id" element={<UserProfile />} />

// 组件内获取
const { id } = useParams();

方案二：状态管理（推荐）

// 使用useLocation传递状态
const handleClick = () => {
  navigate('/detail', { state: { data: userData } });
};

// 在目标组件中获取
const location = useLocation();
const { data } = location.state;