Reactjs React hooks app saga使用history.push然后不'；无法正确渲染组件

谢谢你看这个问题。我用typescript写了一个登录演示。我有一些问题。 1.登录成功时，我使用

history.push（'/home'）

。但是页面呈现了一个

通知

组件。 2.这是登录传奇中更好的路由器跳转方式吗？另一种方法是在Login component.when success.use

useHistory

hook中完成。我更喜欢第一种方法。我是一个新来写前端的后端程序员，所以我不知道最好的方法是什么

services/history.ts

从“历史”导入{createBrowserHistory}；
const history=createBrowserHistory（）；
导出默认历史记录；

我的路由器

import React，{suspend}来自'React'；
从“react Router dom”导入{Route，Switch，Router}；
从“@组件/加载”导入加载；
从“@services/history”导入历史记录；
从“./routes”导入路由；
const renderRoutes=routes.map（{path，exact，component，key}）=>(
));
常量路由器：React.FC=（）=>(
{renderRoutes}
);
导出默认路由器；
//我的路线
从“react”导入{lazy}；
常数路由=[
{
路径：“/”，
键：“登录”，
确切地说：是的，
组件：惰性（（）=>import（'./../views/login'），
},
{
路径：'/home'，
钥匙：“家”，
组件：惰性（（）=>import（'./../views/home'），
},
];
导出默认路径；

我的登录名.tsx

const登录：React.FC=（）=>{
const[loading，setLoading]=useState（false）；
常数antIcon=；
const dispatch=usedpatch（）；
const handleSubmit=（值：any）=>{
设置加载（真）；
const{username，password}=值；
分派（登录请求（用户名、密码））；
};
返回(
Go React
{正在加载？'loggin'：'Login'}
);
};
导出默认登录；

handlesubmit将发送一份快讯，传奇人物将观看此节目。 传奇

import{fork，all，take，call，put，cancel}来自'redux saga/effects'；
从“antd”导入{message}；
从“@services/login”导入fetchLogin；
从'@utils/storage'导入令牌存储；
从“@models/login”导入ILoginResponseData；
从“@models/user”导入UserModel；
从“@services/history”导入历史记录；
进口{
登录失败，
登录成功，
登录请求，
登录成功，
登录失败，
}来自“./行动”；
函数*LoginRequestSaga（用户名：字符串，密码：字符串）{
试一试{
const result:ILoginResponseData=yield call(
获取登录，
用户名，
密码
);
如果（result.code==“1”）{
TokenStorage.storeToken（result.token）；
message.success（result.msg）；
history.push（'/home'）{
const user=useSelector（（状态：RootState）=>state.user）；
返回当前用户：{User.name}；
};
导出默认主页；

登录成功时。页面未正确显示组件

---

@肖东环。历史软件包的最新版本“5.0.0”有一些突破性的变化。现在，你可以将其版本更改为稳定版本，即“4.10.1”，这将起作用

使用以下命令更改历史记录版本

npm install history@4.10.1

---

希望它能工作。

@xiaodonghuan。历史包的最新版本“5.0.0”中有一些突破性的更改。现在，您可以将其版本更改为稳定的版本，即“4.10.1”，这样可以工作

使用以下命令更改历史记录版本

npm install history@4.10.1

---

希望它能起作用。

我不能100%确定redux saga部分，但通常

历史

对象是从

路由器

上下文提供的对象，即通过使用

使用历史

钩子，或使用

使用路由器

包装组件。或者，我使用

连接react路由器

到pl将router history对象转换到redux存储中，并使用分派的操作进行导航。您没有提到代码是否正常工作，您只是在问什么可能是更好的方法吗？这些问题往往会导致固执己见的回答。根据屏幕截图，我猜导航失败。@DrewReese connected react router可以与react路由器dom v5.2.0配合使用？看起来是这样！支持react路由器dom v4/v5，第四个功能要点说它可以与redux saga配合使用。@小东环请分享你的package.json文件或历史包版本。@PulkitAggarwal我已经添加了它。我对redux saga部分不是100%确定，但通常是

历史

对象是从

Router

上下文提供的对象，即使用

useHistory

钩子，或使用

withRouter

包装组件。或者，我使用

connected react Router

将路由器历史对象放置到您的redux存储中，并使用调度操作进行导航。您可以没有提到你的代码是否正常工作，你只是在问什么可能是更好的方法吗？这样的问题往往会导致固执己见的回答。根据屏幕截图，我猜导航失败。@DrewReese连接的react router可以与react router dom v5.2.0一起工作？看起来是这样！支持react router dom v4/v5和第四个功能要点说它适用于redux saga。@小东环请分享你的package.json文件或历史包版本。@PulkitAggarwal我已经添加了它。谢谢。它有效。我在哪里可以找到历史5.0的中断更改问题？我检查了历史包问题。没有找到相关问题。@xiaodonghuan看起来历史v5是兼容的ible与react router v6兼容，而history v4与react router v4/v5兼容。谢谢。它可以工作。在哪里可以找到有关history 5.0的中断更改问题？我检查了历史包问题。没有找到相关问题。@xiaodonghuan看起来history v5与r兼容