useLocation可以在GoogleChrome中使用，但不能在Firefox中使用

Question

我正在开发一个网站，我正在使用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>
)
}

这在谷歌浏览器中非常有效，但在Firefox则不然。。。为什么？

谢谢你的回答：(

Answer 1

好的，我发现有问题

我这样创建我的历史：const history = createBrowserHistory({ forceRefresh: true });，刷新时通过history.push()传递的状态丢失。。。但我仍然不明白为什么它能在Chrome上工作而不能在Firefox 上工作

Answer 2

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

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

如果这还不能解决问题，请看看这是否会导致问题。如果没有正确创建Redux存储，没有Redux DevTools扩展的浏览器可能会产生错误。即使由于某种错误安装，扩展插件在浏览器中不起作用，也可能会出现错误。因此，如果扩展不起作用，请确保也卸载它。

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

这能回答你的问题吗？

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

要安装redux devtools扩展npm包，您可以使用：

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

但对于生产构建，您可能需要：

npm install redux-devtools-extension