useLocation 在 GoogleChrome 中有效，但在 Firefox 中无效

Posted 2023-04-14

【中文标题】useLocation 在 GoogleChrome 中有效，但在 Firefox 中无效

【英文标题】：useLocation working in GoogleChrome but not in Firefox

【发布时间】：2021-03-04 14:51:51

【问题描述】：

我正在开发一个网站，我正在使用 React Router API。 我正在尝试将对象作为状态传递给history.push()

这是我的组件：

HeaderNav.js

import  useHistory  from 'react-router-dom';

function HeaderNav( source, id ) 

  const history = useHistory();

  function handleButton(event) 
    event.stopPropagation();
    history.push(
      pathname: `articles/$id`,
      state: article: source
    )
  
  return (
    <div className="article-header-nav">
      <h3>source.title</h3>
      <button onClick=handleButton className="button-primary">Go</button>
    </div>
  )

点击 /articles/:id 时呈现的我的组件：

ArticleDetail.js

function ArticleDetail() 
  const location = useLocation();
  console.log(location.state.article);

  function renderArticle()
   /*
     DOES STUFF WITH location.state.article to render the article on page
   */
  
  return (
   <div>
     renderArticle()
   </div>
  )

这在 GoogleChrome 中完美运行，但在 Firefox 中却不行……这是为什么呢？

感谢您的回答:)

【参考方案1】：

好的，我找到了问题

我像这样创建我的历史记录： const history = createBrowserHistory( forceRefresh: true ); 并在刷新时通过history.push() 传递的状态丢失...但我仍然不明白为什么它适用于 Chrome 而不是 Firefox

【讨论】：

我在我的应用程序中看到了同样的问题。你有没有想过如何解决它？

Nop...我终于通过URL传递了文章id并在ArticleDetail.js中查询了我的数据库以获取文章而不是通过状态传递它...

【参考方案2】：

Location.reload() 方法重新加载当前 URL，就像刷新按钮一样。

可能会阻止重新加载并抛出 SECURITY_ERROR DOMException。如果调用 location.reload() 的脚本的来源与拥有 Location 对象的页面的来源不同，就会发生这种情况。有关详细信息，请参阅同源政策。

如果这不能解决问题，请看看这是否会导致问题。 如果未正确创建 Redux 存储，则没有 Redux DevTools Extension 的浏览器可能会产生错误。即使扩展程序无法在浏览器中运行以进行某种错误安装，也可能会出现错误。因此，如果扩展程序不起作用，请务必将其卸载。

要修复没有扩展的浏览器上的错误，请使用 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 而不是 window.__REDUX_DEVTOOLS_EXTENSION__ 创建 Redux 存储

这能回答你的问题吗？

------------------+------------------------+---- -----------------------------+-------------

要安装 redux-devtools-extension npm 包，您可以使用：

npm install --save-dev redux-devtools-extension

但对于生产版本，您可能需要：

npm install redux-devtools-extension

【讨论】：

我没有在我的应用程序中使用 redux，问题是在 Firefox 上我的状态保持未定义但在 Chrome 上没有：/