v6路由组件通信问题：父子组件数据传递方式变更

在React Router v6升级过程中，路由组件间的通信方式发生了显著变化。v6移除了withRouter高阶组件和Route的component属性，改为使用useNavigate、useParams等Hook API，这给父子组件数据传递带来了新的挑战。

问题场景：在v5中，我们可以通过withRouter获取路由信息并传递给子组件，或者直接在Route中传递props。但在v6中，这种做法不再适用。

可复现步骤：

创建一个父组件ParentComponent和子组件ChildComponent
父组件通过useParams获取路由参数
尝试将参数传递给子组件，会发现无法直接传递

解决方案：

// v6之前的写法（已废弃）
<Route path="/user/:id" component={UserComponent} />

// v6推荐方式
function ParentComponent() {
  const { id } = useParams();
  
  return (
    <div>
      <ChildComponent userId={id} />
    </div>
  );
}

function ChildComponent({ userId }) {
  // 直接使用传递的props
  return <div>User ID: {userId}</div>;
}

另一种方式是使用Context API：

const RouteContext = createContext();

function RouteProvider({ children }) {
  const params = useParams();
  
  return (
    <RouteContext.Provider value={params}>
      {children}
    </RouteContext.Provider>
  );
}

// 在组件树中使用
function ChildComponent() {
  const params = useContext(RouteContext);
  return <div>{params.id}</div>;
}

v6的这种设计更符合React Hooks的理念，但需要开发者重新思考组件通信模式。