CODEWITHSUNDEEP
ecmascript-6webpackreact-router
adin
adin

Reputation: 53

Warning: [history] pushState is deprecated; use push instead

when using a webpack + react + react-router + es6

Warning: [history] pushState is deprecated; use push instead

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

Upvotes: 5

Views: 5072

Answers (3)

jimmont
jimmont

Reputation: 2543

No, the native browser history API is not deprecated and the pushState method is also not deprecated as of 2018 September. See the docs: 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

I'm starting to get the impression that the React community is a source of misinformation as it reinvents browser features because a library named history replaced its own pushState with a push method.

In my limited experience history.pushState(<state-object>, 'page title', '#url') works very well and the events from this API are reliable. It is highly useful to have history.state update (history's state, which can be linked to the document/global state as-desired) based on the location URL and history activity. Feel free to add corrections or insight via either edits or comments. This API is useful to understand and this question suggests there is a notion in the wild tending toward avoiding understanding native Web APIs--something I consider a strong antipattern counter to progress on the Web.

Upvotes: 1

TheBetterJORT
TheBetterJORT

Reputation: 808

In previous versions of History (npm install history) pushState was used. pushState is a feature of HTML5 concerning the updating of the URL without navigating to a page/template/component.

This was deprecated in honor of push('path'), which is a cleaner better syntax according to some.

Replace 

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

with

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

Upvotes: 2

Linus
Linus

Reputation: 130

I had the same issue myself today, it's due to the new merge request to the History repo:

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

[TEMP FIX] Update your package.json, change "history" to "1.13.1" in dependencies. Do a "npm install" afterwards to update.

[REAL FIX] Wait until someone merges a fix into react-router.

Upvotes: 9

Related Questions