How to get the URL parameters in React ? localhost:3000/reset-password/:token

Question

I've been stuck on this a while and I'm kind of new to React. How would I get the URL token the React way without using windows.href and pass it to my resetPasswordToken?

In my routes

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

URL

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

Code

    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
      });
    });
  };

score 2 · Accepted Answer · answered Jan 02 '19 at 12:59

By following the docs you can see that you can access the url parameters from the component - in your case ResetToNewPassword - as a property match.params.

In your case: match.params.token

Example here: https://reacttraining.com/react-router/web/example/url-params

How to get the URL parameters in React ? localhost:3000/reset-password/:token

1 Answers1