我是新人并且正在用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”即将到来。我应该怎么办 ？
该Deposits组件未收到history执行推送的道具。
假设您的PrivateRoute组件将路径道具传递到渲染的组件，那么您可以history从传递Home到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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句