警告：[history] ​​pushState 已弃用；改为使用推送

Question

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

警告：[历史] pushState 已弃用；使用推送代替

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

Answer 1

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

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

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

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

Answer 2

在之前版本的History（npm install history）中使用了pushState。 pushState 是 HTML5 的一项功能，涉及在不导航到 page/template/component 的情况下更新 URL。

这是为了纪念 push('path') 而弃用的，根据某些人的说法，这是一种更清晰、更好的语法。

替换

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

和

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

Answer 3

否，本机浏览器历史记录API 未弃用并且pushState方法也是未弃用 截至 2018 年 9 月。请参阅文档：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 的库用 push 方法替换了它自己的 pushState。

以我有限的经验，history.pushState(<state-object>, 'page title', '#url') 效果很好，API 中的事件是可靠的。根据位置 URL 和历史 activity 更新 history.state 更新（历史状态，可以根据需要链接到 document/global 状态）非常有用。随时通过编辑或评论添加更正或见解。这个 API 理解起来很有用，这个问题表明有一种野外的观念倾向于避免理解原生 Web API——我认为这是对 Web 进步的强烈反模式。