history.push 正在更改 url 但未在反应中呈现组件

Posted

技术标签:

【中文标题】history.push 正在更改 url 但未在反应中呈现组件【英文标题】:history.push is changing url but not rendering component in react 【发布时间】:2021-02-08 13:13:16 【问题描述】:

我遇到了 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>

这是我的商店组件

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;

【问题讨论】:

你能展示你的商店组件吗? 我将编辑问题并向其添加商店组件@Yoel 好的,看看我的回答 能不能把安慰history的结果显示一下 【参考方案1】:

在 Store.js 中添加

import withRouter from 'react-router';
export default withRouter(Store)

另外,删除不必要的路由器

//<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

【讨论】:

我对 Store.js 进行了此更改,但组件未呈现。 URL 正在更改,但只有当我刷新页面组件时才会呈现。 @Hadiazeez 我可以看到你的导入吗?他看起来像那样吗? import Route from 'react-router-dom'; import BrowserRouter as Router, Switch, Route from "react-router-dom"; 这是 app.js 中的导入。 import withRouter from 'react-router-dom'; 这是我现在在 store.js 中所做的导入 @Hadiazeez 好的,尝试删除路由器 不必要 好的,我进行了更改,但仍然无法呈现。当路由到 AuthenticatedRoutes 以外的路由时会发生这种情况。我创建了一个 AuthenticatedRoutes 函数,因为我希望底部导航到该路由。当我删除路由器时,它会抛出错误“不变式失败:您不应该在 之外使用 ”。【参考方案2】:

我知道我的回答迟了,但我会将我的解决方案提供给新用户:

有时只是版本问题: 检查history包的版本是否和react router history的版本一致

如果你使用 npm :

npm list history

纱线:

yarn 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

纱线

yarn add history@4.10.1

【讨论】:

这解决了我的问题。

以上是关于history.push 正在更改 url 但未在反应中呈现组件的主要内容,如果未能解决你的问题,请参考以下文章

React 路由器更改 url 但未更新上下文

Localhost端口已更改,但未在WordPress站点中反映出来

React 组件未在 history.push 上重新加载

热代码修复正在编译但未在 grails 2.4.4 中选择

在页面 url 上创建事件已更改

功能组件渲染中的 props.history.push 不会渲染组件