Reactjs history.push正在更改url，但未在react中呈现组件

我正面临react history.push的问题。我的代码的逻辑是，当API调用完成时，如果响应中的登录状态为false，我希望推送到另一个路由。URL正在更改，但组件在刷新页面之前不会呈现

这是我更改路线的代码

useEffect(() => {
const getProductsData = async () => {
  setIsLoading(true);
  const productsData = await fetchProductsApi();
  setIsLogin(productsData.data.login);
  setProductsArray(productsData.data.data);
  setIsLoading(false);
  console.log(productsData.data);
  if (productsData.data.login === false) {
    history.push("/");
  }
};
getProductsData(); 
}, [stock]);

这是我的路线代码

const AuthenticatedRoutes = () => {
return (
  <Router>
    <BottomNavigationMenu />
    <Switch>
      <Route path="/add_product" component={AddNewProduct} />
      <Route path="/add_image/:id" component={AddImage} />
      <Route path="/products" component={Products} />
      <Route path="/dashboard" component={Dashboard} />
    </Switch>
  </Router>
  );
  };

return (
<Router>
  <Switch>
    <Route exact path="/" component={Store} /> 
    <Route path="/product_detail" component={ProductDetail} />
    <Route path="/signup" component={Signup} />
    <Route exact path="/signin" component={SignIn} />
    <Route component={AuthenticatedRoutes} />      
  </Switch>
</Router>

const AuthenticatedRoutes=（）=>{
返回(
);
};
返回(

这是我的商店组件

import React from 'react';
import styles from "./css/store.module.css"
import SearchIcon from '@material-ui/icons/Search';

const Store = () => {
return ( 
<div className={styles.container}>
    <div className={styles.store_card}>
        <h1 className={styles.store_name}>Fliq shop</h1>
        <h1 className={styles.store_location}>Location</h1>
    </div>
</div>
);
}

export default Store;

从“React”导入React；
从“/css/store.module.css”导入样式
从“@material ui/icons/Search”导入SearchIcon；
常量存储=（）=>{
报税表（
Fliq商店
位置
);
}
导出默认存储；

In-Store.js add

import {withRouter} from 'react-router';

此外，删除不必要的路由器

//<Router>    remove this line
  <Switch>
    <Route exact path="/" component={Store} /> 
    <Route path="/product_detail" component={ProductDetail} />
    <Route path="/signup" component={Signup} />
    <Route exact path="/signin" component={SignIn} />
    <Route component={AuthenticatedRoutes} />      
  </Switch>
//</Router>    and remove this line also

//删除此行
//并删除这一行也

In-Store.js add

import {withRouter} from 'react-router';

此外，删除不必要的路由器

//<Router>    remove this line
  <Switch>
    <Route exact path="/" component={Store} /> 
    <Route path="/product_detail" component={ProductDetail} />
    <Route path="/signup" component={Signup} />
    <Route exact path="/signin" component={SignIn} />
    <Route component={AuthenticatedRoutes} />      
  </Switch>
//</Router>    and remove this line also

//删除此行
//并删除这一行也

我知道我的答案晚了，但我会将我的解决方案提供给新用户：

有时只是版本问题： 检查历史记录包的版本是否与路由器历史记录的版本相同

如果您使用npm：

npm list history

纱线：

我明白了

├─ history@5.0.0
├─ react-router-dom@5.2.0
│  └─ history@4.10.1
└─ react-router@5.2.0
   └─ history@4.10.1

您注意到版本不同，因此请安装相同版本的react router

npm i history@4.10.1

纱线

---

我知道我的回答很晚，但我会向新用户提供我的解决方案：

有时只是版本问题： 检查历史记录包的版本是否与路由器历史记录的版本相同

如果您使用npm：

npm list history

纱线：

我明白了

├─ history@5.0.0
├─ react-router-dom@5.2.0
│  └─ history@4.10.1
└─ react-router@5.2.0
   └─ history@4.10.1

您注意到版本不同，因此请安装相同版本的react router

npm i history@4.10.1

纱线

---

---

你能显示你的商店组件吗？我会编辑问题并添加商店组件@YoelOK查看我的回答你能显示安慰

历史记录的结果吗
你能显示你的商店组件吗？我会编辑问题并添加商店组件@YoelOK查看我的回答你能显示安慰
历史记录的结果吗nge到Store.js，组件仍然没有呈现。URL正在更改，但只有当我刷新页面组件呈现时才可以。@Hadiazeez我可以看到你的导入吗？他看起来像吗？
从“react router dom”导入{Route}；
从“react router dom”导入{BrowserRouter as router，Switch，Route}这是app.js中的导入。
import{withRouter}从“react router dom”；
这是我现在在商店中进行的导入。js@Hadiazeez好的，很好，尝试删除不必要的路由器好的，我做了更改，但它仍然没有呈现。当路由到非AuthenticatedRoutes中的路由时会发生这种情况。我创建了一个函数AuthenticatedRoutes，因为我希望底部导航到该路由。当我删除了路由器，它抛出错误“不变量失败：您不应该在外部使用”。我对Store.js进行了此更改，但组件仍然没有呈现。URL正在更改，但只有在我刷新页面组件呈现时才会更改。@Hadiazez我能看到您的导入吗？他看起来像吗？
import{Route}从“react router dom”；
从“react router dom”导入{BrowserRouter as router，Switch，Route}；
这是app.js中的导入。
导入{withRouter}从“react router dom”；
这是我现在在商店中进行的导入。js@Hadiazeez好的，很好，尝试删除不必要的路由器好的，我做了更改，但它仍然没有呈现。当路由到非AuthenticatedRoutes中的路由时会发生这种情况。我创建了一个函数AuthenticatedRoutes，因为我希望底部导航到该路由。当我移除路由器，它抛出错误“不变量失败：您不应该在外部使用”。