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

Question

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

Answer 1

问题

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

解决方案

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

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

或者您可以在您的 useHistory 组件中使用来自 react-router-dom 的 Deposits 反应钩子。

const history = useHistory();

...

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