反应钩子："无法读取未定义的属性'推送'

Question

我正试图将我的主页重定向到"呼叫"；基于redux状态的页面。我可以通过手动键入url来转到那个组件，但不能用函数来完成。我试过"；重定向到"history.push"；但是没有一个对我有用。我解决不了这个问题。这是我的密码；

const Phone = ({ hidden, photoOpened, inCall }) => {
const dispatch = useDispatch(getContacts());
let history = useHistory();
useEffect(() => {
if (inCall.inCall) {
history.push('/call')
}
}, [inCall]);
useEffect(() => {
dispatch(getContacts());
}, [])
return (
<div hidden={process.env.NODE_ENV === 'development' ? !hidden : hidden} className={photoOpened ? "phone-container-rotate" : "phone-container"}>
<div className="coque" />
<Suspense fallback={<div className="animated fadeIn pt-1 text-center">Loading...</div>}>
<HashRouter basename="/phone">
<div
className="phone-content"
style={{ backgroundImage: `url(${background})` }}
>
<HeaderBar />
<BannerNotifications />
<Switch>
{routes.map((route, idx) => {
return route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
render={props => <route.component {...props} />}
/>
) : null;
})}
</Switch>
</div>
<Route component={BottomPhoneNavigator} />
</HashRouter>
</Suspense>
</div>
);
};

Answer 1

您可以尝试测试您效果中历史的历史存在，也可以将其添加到依赖列表中

useEffect(() => {
if (history && inCall.inCall) {
history.push('/call')
}
}, [inCall, history]);

重要的是，使用这个钩子的组件必须在Router中，我看到您使用的是HashRouter，但作为使用钩子的组件的子级。

同样，如果你坚持这种结构，为什么不尝试在Switch中使用Redirect？这可以与一些智能测试配合使用，这样你就不会陷入循环：(

Answer 2

要使用历史记录，您的手机组件应该位于路由器组件内