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

Question

我已经被困在这一点上有一段时间了，而且我还是个新手。我如何在不使用windows.href的情况下以React的方式获取URL令牌并将其传递给我的resetPasswordToken？

在我的路线中

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

URL

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