警告: [history] pushState已被弃用，请使用push。

Question

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

警告：[history] pushState 已过时，请改用 push 代替

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

- adin

---

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

Answer 1

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

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

[临时解决方案] 更新您的package.json文件，在dependencies中将"history"更改为"1.13.1"。之后执行“npm install”进行更新。

[真正的解决方案] 等待某人将修复合并到react-router中。

- Linus

---

请注意，您所看到的只是一个弃用警告。我认为没有理由放弃错误修复，只为了避免在控制台中看到警告信息。 - lecstor

Answer 2

在之前的 History 版本中（npm install history），使用 pushState 来更新 URL 而不需要跳转到另一个页面/模板/组件。pushState 是 HTML5 的一个特性。

为了更加简洁，一些人认为应该废弃 pushState，改用 push('path')。

替换：

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

使用

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

- TheBetterJORT

---

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

根据此处的文档 https://github.com/mjackson/history/blob/master/docs/QuerySupport.md，您可以提供一个“query”对象来进行映射。例如：history.push({ pathname: '/the/path', query: { the: 'query' } })。 - Matt Klinker

Answer 3

不是，截至2018年9月，原生浏览器历史API没有被弃用，pushState方法也没有被弃用。请参阅文档：https://developer.mozilla.org/zh-CN/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和历史记录活动更新history.state（历史状态），这非常有用，可以将其与文档/全局状态相关联。欢迎通过编辑或评论添加更正或见解。了解此API非常有用，而这个问题表明，在野外有一种趋势，倾向于避免理解本机Web API——我认为这是反对Web进步的强烈反模式。

- jimmont