警告：[历史] pushState 已弃用；改用推送

Posted 2023-02-21

【中文标题】警告：[历史] pushState 已弃用；改用推送

【英文标题】：Warning: [history] pushState is deprecated; use push instead

【发布时间】：2016-03-11 18:36:45

【问题描述】：

当使用 webpack + react + react-router + es6时

<pre>
import React from 'react';
import ReactDOM from 'react-dom';
import createHistory from 'history';
import App from './component/app';
import About from './component/about';
import Concat from './component/concat';
import List from './component/list';
import Router, Route from 'react-router';
const history = createHistory();
const router = (
    <Router history=history>
        <Route path="/" component=App>
            <Route path="about" component=About />
            <Route path="concat" component=Concat />
            <Route path="list/:id" component=List />
            <Route path="*" component=About/>
        </Route>
    </Router>
);

ReactDOM.render(
    router,
    document.getElementById('root')
);
</pre>

【问题讨论】：

history 模块是什么？它来自一个包，还是你自己的代码？无论哪种方式，我都没有看到任何证据表明 pushState 已被弃用

【参考方案1】：

我今天自己也遇到了同样的问题，这是由于对历史存储库的新合并请求：

https://github.com/rackt/history/commit/a9db75ac71b645dbd512407d7876799b70cab11c

[临时修复] 更新您的 package.json，将依赖项中的“history”更改为“1.13.1”。之后执行“npm install”进行更新。

[真实修复] 等到有人将修复合并到 react-router 中。

【讨论】：

请注意，您看到的只是弃用警告。我认为您没有理由放弃错误修复以避免在控制台中看到警告。

【参考方案2】：

在以前的历史版本（npm 安装历史）中使用了 pushState。 pushState 是 html5 的一项功能，涉及在不导航到页面/模板/组件的情况下更新 URL。

为了纪念 push('path')，它已被弃用，根据某些人的说法，这是一种更简洁更好的语法。

替换

this.history.pushState(null, "/route/") 

与

this.history.push('/store/' + storeId);

【讨论】：

但是push 不允许传递state 对象？那么我们如何实现呢？

这里的每个文档github.com/mjackson/history/blob/master/docs/QuerySupport.md 您可以提供一个将映射的“查询”对象。例如：history.push( pathname: '/the/path', query: the: 'query' )

【参考方案3】：

否，自 2018 年 9 月起，原生浏览器历史 API 未弃用，pushState 方法也未弃用。请参阅文档：https://developer.mozilla.org/en-US/docs/Web/API/History_API https://www.w3.org/TR/html50/browsers.html#history https://html.spec.whatwg.org/multipage/history.html#history

我开始觉得 React 社区是错误信息的来源，因为它重新发明了浏览器功能，因为名为 history 的库将其自己的 pushState 替换为 push 方法。

根据我有限的经验，history.pushState(<state-object>, 'page title', '#url') 运行良好，并且来自此 API 的事件是可靠的。根据位置 URL 和历史活动，更新 history.state（历史状态，可以根据需要链接到文档/全局状态）非常有用。随意通过编辑或 cmets 添加更正或见解。这个 API 对理解很有用，这个问题表明存在一种倾向于避免理解原生 Web API 的概念——我认为这是对 Web 进步的强烈反模式。