Cannot read property 'params' of undefined in React

Question

I'm new to React. I'm trying to pass a value through URL using react-router-dom. But unable to get the params getting

TypeError: Cannot read property 'params' of undefined.

I tried the solutions that already present but nothing help. What is the mistake I did? Can someone explain it to me? Thanks in advance.

Main Component:

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/edit/:id" component={Edit} exact={true}>
            <Edit />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}
export default App;

Edit Component:

class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.match.params.id
    };
  }

  render() {
    return <h2>Edit Page</h2>;
  }
}
export default Edit;

console log this.props and check whether the match key exists in it or not? — Alok Mali
– Alok Mali, Commented Mar 2, 2020 at 12:35
and please mention the full link which you are using for edit. — Alok Mali
– Alok Mali, Commented Mar 2, 2020 at 12:41

devserkan · Accepted Answer · 2020-03-02 12:41:58Z

3

Note: I provided my answer with useParams since your original question was involving it. Other than that if you have to use a class component, normally this.props.match.params.id should work since you are using your component via a Route.

You should use useParams in your Edit component and it should be a function component.

function Edit() {
  const { id } = useParams();
  return (
    <div>{id}</div>
  )
}

Also, I don't know which React Router version you use, but if you are not using v6, you probably want to use the Route part like this:

<Router>
  <Switch>
    <Route path="/edit/:id" component={Edit} exact />
  </Switch>
</Router>

edited Mar 2, 2020 at 12:41

answered Mar 2, 2020 at 12:34

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

2 Comments

dhamo dharan Over a year ago

Thank you, working fine with class component alone by removing component from in-between route tag.

dhamo dharan Over a year ago

By changing this to <Route path="/edit/:id" component={Edit} exact={true}><Edit /></Route> this <Route path="/edit/:id" component={Edit} exact={true}></Route>

Yash · Accepted Answer · 2020-03-02 12:36:11Z

0

Try this -

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

class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.match.params.id
    };
  }

  render() {
    return <h2>Edit Page</h2>;
  }
}
export default withRouter(Edit);

answered Mar 2, 2020 at 12:36

Yash

9199 silver badges25 bronze badges

Comments

Ravi · Accepted Answer · 2020-03-02 12:51:54Z

0

Need to check your react version because your code just ran fine in my system - Edited your Edit component

return (
            <>
            <h2>Edit Page</h2>
            {this.state.id}
            </>
        );

accessed url - http://localhost:3000/edit/:2

enter image description here

result in image

answered Mar 2, 2020 at 12:51

Ravi

283 bronze badges

1 Comment

dhamo dharan Over a year ago

I'm using 16.13.0

Collectives™ on Stack Overflow

Cannot read property 'params' of undefined in React

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related