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

user_874691 0
Viewed 54351

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?

react-router reactjs
6 Answers

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!

user_41920760

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.

user_106656550

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

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