时间戳

首页 > 解决方案 > Reactjs 钩子无法读取未定义错误的属性“推送”

javascript - Reactjs 钩子无法读取未定义错误的属性“推送”

问题描述

我是新手，正在用 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'。我应该怎么办 ？

标签： javascriptreactjsreact-routerreact-hooksreact-router-dom

解决方案

问题

该Deposits组件没有收到history进行推送的道具。

解决方案

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

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

或者你可以只使用组件内部的useHistoryreact 钩子。react-router-domDeposits

const history = useHistory();

...

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

推荐阅读