Cannot read property ‘params’ of undefined (React Router 4)

Question

I have a route set up to render a component:

<Route exact path="/page/:id" location={this.props.location} key={this.props.location.key} render={({ location }) => (
    <PageStart key={this.props.location.key} />
)} />

Then inside that component (PageStart) I have:

this.props.match.params.id

But it throws an error:

Cannot read property 'params' of undefined

Passing props when simply calling component={} seems to work fine but not in a render function. Why?

score 36 · Accepted Answer · edited Jul 06 '18 at 15:18

36

Because with render you are not passing the default props passed by the router into component, like match, history etc.

When you write this:

<PageStart key={this.props.location.key} />

It means no props value in PageStart component.

Write it like this:

render = {props => <PageStart {...props} key={this.props.location.key} /> } />

Now {...props} will pass all the value into PageStart component.

edited Jul 06 '18 at 15:18

David Schumann

13,380
9
75
96

answered Sep 13 '17 at 12:12

Mayank Shukla

100,735
18
158
142

2

When you explain it, it becomes obvious. Thanks! – Matt Saunders Sep 13 '17 at 12:53
Why is it needed to pass - `this.props.location.key`? – Hussain Aug 13 '18 at 06:39
@Hussain not sure, i copied that part from ques :) – Mayank Shukla Aug 13 '18 at 12:04
Finally somebody that explained it for class usage! – SenTisso Sep 02 '19 at 20:19
@Hussain I think adding the key gives the component a unique identifier so React can know to identify each component in its virtual dom for fast re-rendering. From my understanding, only lists require it but it's possible the use of keys for general components extends as well. See https://reactjs.org/docs/lists-and-keys.html for more info. – Biniyam Asnake Apr 25 '20 at 08:11

score 7 · Answer 2 · edited Jul 06 '18 at 15:17

7

Because you don't pass any match property to PageStart. You give it a key but no match. Try this:

<Route 
    exact 
    path="/page/:id" 
    location={this.props.location} 
    key={this.props.location.key} 
    render={({ 
        location, 
        match 
    }) => (
        <PageStart key={this.props.location.key} match={match} />
    )} 
/>

edited Jul 06 '18 at 15:17

David Schumann

13,380
9
75
96

answered Sep 13 '17 at 12:15

ChrisR

3,922
1
14
24

score 4 · Answer 3 · answered Aug 14 '18 at 21:02

4

In my case, I found out that it is no longer match in the router props, it is now computedMatch.

I.E: this.props.computedMatch.params.id

Hope this helps someone!

answered Aug 14 '18 at 21:02

jenkizenki

741
6
14

score 3 · Answer 4 · edited Jul 06 '18 at 15:18

The error says the match prop is undefined. That's correct, there is no match prop here:

<PageStart key={this.props.location.key} />

So we need to pass it in. The render function receives a bunch of props from react-router, and all of them need to be passed further down. So, spread them first, and then add your own props:

<Route
  exact
  path="/page/:id"
  location={this.props.location}
  key={this.props.location.key}
  render={(props) => (
    <PageStart {...props} key={this.props.location.key} />
  )}
/>

score 1 · Answer 5 · answered Feb 23 '20 at 08:04

please check for the routename provided

const AuthNavigattor = createStackNavigator(
  {
    logins: {screen: LoginScreen},
    splash: {screen: SplashScreen},
    register: {screen: RegisterScreen},
    forgetPassword: {screen: ForgetPasswordScreen},
    mobileNumber: {screen: MobileNumberScreen},
    codeEnter: {screen: CodeEnterScreen},
    changePassword: {screen: ChangePasswordScreen},
    // dashboard: { screen: Drawer }
  },
  {
    // initialRouteName: "splash",
    headerMode: 'none',
  },
);
const ProfileNavigattor = createStackNavigator(
  {
    logins: {screen: LoginScreen},
    splash: {screen: SplashScreen},
    register: {screen: RegisterScreen},
    forgetPassword: {screen: ForgetPasswordScreen},
    mobileNumber: {screen: MobileNumberScreen},
    codeEnter: {screen: CodeEnterScreen},
    changePassword: {screen: ChangePasswordScreen},
    // dashboard: { screen: Drawer }
  },
  {
    // initialRouteName: "splash",
    headerMode: 'none',
  },
);

here there is repitition of same route name like logins, splash etc which might be the reason for this error. Rename this unique will solve your issue.

score 0 · Answer 6 · answered Jul 10 '18 at 10:22

0

try this please. i hope it can solve the issue.

render = {props => <PageStart {...props} key={this.props.location.key} /> } />

answered Jul 10 '18 at 10:22

John Htet

21

Cannot read property ‘params’ of undefined (React Router 4)

6 Answers6

Linked

Related