无法读取未定义的属性“参数”（React Router 4）答案

【问题标题】：Cannot read property ‘params’ of undefined (React Router 4)无法读取未定义的属性“参数”（React Router 4）
【发布时间】：2018-02-22 03:26:56
【问题描述】：

我设置了一个路由来渲染组件：

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

然后在那个组件（PageStart）里面我有：

this.props.match.params.id

但是它会抛出一个错误：

Cannot read property 'params' of undefined

在简单地调用component={} 时传递道具似乎可以正常工作，但不能在渲染函数中。为什么？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

因为render 不会将路由器传递的默认道具传递给组件，例如匹配、历史记录等。

当你写这个时：

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

这意味着PageStart 组件中没有props 值。

这样写：

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

现在{...props} 会将所有值传递给PageStart 组件。

【讨论】：

当你解释它时，它就变得显而易见了。谢谢！
为什么要通过-this.props.location.key?
@Hussain 不确定，我从 ques 复制了那部分 :)
终于有人解释了它的类用法！
@Hussain 我认为添加键为组件提供了唯一标识符，因此 React 可以知道识别其虚拟 dom 中的每个组件以快速重新渲染。据我了解，只有列表需要它，但通用组件的键的使用也可以扩展。请参阅reactjs.org/docs/lists-and-keys.html 了解更多信息。

【解决方案2】：

因为您没有将任何 match 属性传递给 PageStart。你给它一个key，但没有match。尝试这个：

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

【讨论】：

【解决方案3】：

在我的例子中，我发现路由器道具中不再是match，现在是computedMatch。

即：this.props.computedMatch.params.id

希望这对某人有所帮助！

【讨论】：

【解决方案4】：

错误提示 match 属性未定义。没错，这里没有 match 道具：

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

所以我们需要传入它。render 函数从 react-router 接收到一堆 props，所有这些都需要进一步向下传递。所以，先传播它们，然后添加你自己的道具：

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

【讨论】：

【解决方案5】：

请检查提供的路线名称

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',
  },
);

这里有相同的路由名称，如登录、启动等，这可能是导致此错误的原因。重命名这个唯一的将解决您的问题。

【讨论】：

【解决方案6】：

请试试这个。希望能解决问题。

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

【讨论】：