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

Posted 2023-02-21

【中文标题】无法读取未定义的属性“参数”（React Router 4）

【英文标题】：Cannot read property ‘params’ of undefined (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= 时传递道具似乎可以正常工作，但不能在渲染函数中。为什么？

【参考方案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 />  />