Meteor+React Router v4获取路由params失败问题求助

我之前也踩过React Router v4和Meteor withTracker结合的这个坑，咱们来一步步搞定它：

问题根源 #

React Router v4 不再像旧版本那样自动把路由参数（比如/:token里的token）注入到组件的props中。你现在的withTracker直接尝试从{ params }里取参数，但这个params根本没被传递进来，所以才会出现params未定义的错误。

解决方案分两种情况： #

情况1：你的AcceptInvitation是类组件

需要用react-router-dom提供的withRouter高阶组件先包裹你的组件，它会把路由相关的props（包括params）注入进来，然后再用withTracker包裹。注意顺序很重要！

修改后的代码如下：

import { withRouter } from 'react-router-dom';
import { withTracker } from 'meteor/react-meteor-data';

// 先让withRouter注入路由props，再传给withTracker
export default withRouter(withTracker(({ params }) => {
  const invitationId = params.token;
  const subscription = Meteor.subscribe('invitations.accept', invitationId);
  return {
    loading: !subscription.ready(),
    invitation: Invitations.findOne(invitationId),
  };
})(AcceptInvitation));

情况2：你的AcceptInvitation是函数组件

更推荐用React Hooks的写法，直接用useParams钩子获取路由参数，搭配Meteor的useTracker钩子（替代withTracker的钩子版本），代码更简洁：

import { useParams } from 'react-router-dom';
import { useTracker } from 'meteor/react-meteor-data';

const AcceptInvitation = () => {
  // 直接通过useParams拿到token参数
  const { token } = useParams();
  
  // 用useTracker处理Meteor订阅和数据获取
  const { loading, invitation } = useTracker(() => {
    const subscription = Meteor.subscribe('invitations.accept', token);
    return {
      loading: !subscription.ready(),
      invitation: Invitations.findOne(token),
    };
  });

  // 你的组件渲染逻辑...
  if (loading) return <div>加载中...</div>;
  if (!invitation) return <div>无效的邀请链接</div>;
  
  return (
    // 渲染邀请内容
  );
};

export default AcceptInvitation;

额外检查点 #

别忘了确认你的路由配置是正确的，路由路径必须包含:token参数，比如：

import { Route } from 'react-router-dom';

// 在你的路由配置里
<Route path="/accept-invite/:token" component={AcceptInvitation} />

这里的:token必须和你代码里获取的参数名称完全一致（比如你用params.token，这里就不能写成:invitationId）。

内容的提问来源于stack exchange，提问作者Q. Bert