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

Question

I have a route set up to render a component:

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

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.

Answer 5

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!

Answer 6

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.