How to get parameter from url in react js?

Question

I'm very new to react and am having trouble accessing the parameter from URL. I've looked for many solutions but I kept getting the same error of "Uncaught TypeError: Cannot read property 'params' of undefined". How can I access the param from url in reactjs component?

In App.js

render() {
  return (
    <Router>
      <ResetPassword path="/reset-password/:token" />
    </Router>
  )
}

In ResetPassword.js

import React, { Component } from "react";

class ResetPassword extends Component {
  componentDidMount() {
    const { token } = this.props.match.params.token;
    console.log(token);
  }

  render() {
    return (
      <div className="resetPassword">
        <div className="change__container">
          <form>
            <h1 id="changePassword__message"></h1>
            <input
              type="password"
              name="password"
              placeholder="password"
              className="change__textInput"
              required
            />
            <input
              type="password"
              name="passwordTwo"
              placeholder="confirm password"
              className="change__textInput"
              required
            />
            <input type="submit" value="Submit" className="change__btnInput btn" required />
          </form>
        </div>
      </div>
    );
  }
}

export default ResetPassword;

Error Uncaught TypeError: Cannot read property 'params' of undefined

That means you are not properly sending the params to the ResetPassword component, so when the component mounts there is no params. Check how you are setting the :token as the error is coming from there — Alex Yepes
– Alex Yepes, Commented Jan 17, 2021 at 16:17

Mihai Moraru · Accepted Answer · 2021-01-17 15:49:44Z

1

Assuming that you use react-router, you may try this:

import { useParams } from "react-router";
const { token } = useParams();

answered Jan 17, 2021 at 15:49

Mihai Moraru

4044 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Salehi · Accepted Answer · 2021-01-17 17:00:02Z

0

you should add component as prop to access match

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

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

or if you want pass custom props you can use render prop:

<Route
 path="/reset-password/:token"
 render={(props) => <ResetPassword {...props} myProp={"foo"} />}
/>

And for reading token you can do one of these ways:

const { token } = this.props.match.params;
const token = this.props.match.params.token;

edited Jan 17, 2021 at 17:00

answered Jan 17, 2021 at 16:54

Salehi

2211 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to get parameter from url in react js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related