【问题标题】：Reactjs hooks cannot read property 'push' of undefined errorReactjs 钩子无法读取未定义错误的属性“推送”
【发布时间】：2021-05-04 10:33:28
【问题描述】：

我是新手，正在用 react js 开发简单的仪表板。

我的 App.js 文件是

<BrowserRouter>
        <div>
         <div>
            <Switch>
              <Route exact path="/" component={Login} />
              <PublicRoute path="/login" component={Login} />
              <PrivateRoute path="/dashboard" component={Home} />
              <PrivateRoute path="/home2" component={Home2} />
             </Switch>
          </div>
        </div>
</BrowserRouter>

Home 组件中有 map 函数，调用另一个名为 Deposits.js 的组件来映射卡片组件上的数组元素。

Home.js 文件代码部分为：

<Grid container spacing={3}>
      {menuData.map((x) => (
              <Grid item xs={12} md={4} lg={3}>
                <Paper>
                      <Deposits site_informations={x} channelName_coverted 
                      {(x.ChannelName).replace("_"," ")} />
                </Paper>
</Grid>

Deposits.js中有一个按钮，我想用这个按钮实际点击另一个页面。

<IconButton onClick={() => props.history.push({ pathname: "/home2", state: { number: site_info.channel } })}  >
  
          <TrendingUp />

</IconButton>

但是当 onClick 时，无法读取属性 'push' 的未定义错误即将到来。我该怎么办？

【问题讨论】：

标签： javascript reactjs react-router react-hooks react-router-dom

【解决方案1】：

问题

Deposits 组件没有收到 history 属性来进行推送。

解决方案

假设您的PrivateRoute 组件将路由道具传递给渲染组件，那么您可以将history 从Home 传递到Deposits

<Deposits
  history={props.history}
  ...other props 
/>

或者你可以在你的Deposits组件中使用react-router-dom中的useHistory react hook。

const history = useHistory();

...

<IconButton
  onClick={() => history.push({
    pathname: "/home2",
    state: { number: site_info.channel }
  })}
>
  <TrendingUp />
</IconButton>

【讨论】：