reactjs - React中如何获取URL参数？本地主机 :3000/reset-password/:token

Question

我已经被困在这个问题上有一段时间了，而且我对 React 还很陌生。如何在不使用 windows.href 的情况下以 React 方式获取 URL token 并将其传递给我的 ResetPasswordToken？

在我的 route

<Route path="/reset-password/:token" component={ResetToNewPassword} />

网址

http://localhost:3000/reset-password/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiZW1haWxBZGRyZXNzIjoiYXJ0aHVydHJ1b25nLndvcmtAZ21haWwuY29tIiwiZmlyc3ROYW1lIjoiQXJ0aHVyIiwicm9sZSI6IlVzZXIiLCJ0eXBlIjoiUGF0aWVudCIsImxhc3ROYW1lIjoiVHJ1b25nIiwiaWF0IjoxNTQ2NDMyOTA1LCJleHAiOjE1NDY0MzQ3MDV9.LhWsrovx1l4lHDBxZ3nwrMhA_ADoLkZFn2XjKeSzNIg

代码

    handleSubmit = e => {
    e.preventDefault();

    const { onSubmit = () => {} } = this.props;

    this.props.form.validateFields((err, values) => {
      if (err) return;
      const { match = {} } = this.props;
      const { params = {} } = match;
      const resetPasswordToken = params.resetPasswordToken;
      onSubmit({
        ...values,
        resetPasswordToken
      });
    });
  };

Answer 1

通过遵循文档，您可以看到您可以从组件访问 url 参数 - 在您的情况下 ResetToNewPassword - 作为属性 match.params。

在您的情况下:match.params.token

示例如下: https://reacttraining.com/react-router/web/example/url-params