title: React require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")
body: <p>So basically i am having a problem in using the history library in react.</p>
  
  <p>Is it because of the latest version should i try to downgrade the history version but as the error states that <code>Support for the latter will be removed in the next major release.</code> so how should i change and where should i change it?</p>
  
  <p>it says:</p>
  
  <pre><code>Warning: Please use `require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")`. Support for the latter will be removed in the next major release.
  </code></pre>
  
  <p>AND</p>
  
  <pre><code>Warning: Please use `require("history").createHashHistory` instead of `require("history/createHashHistory")`. Support for the latter will be removed in the next major release.
  </code></pre>
  
  <p>I am not quite sure how to fix it.</p>
  
  <pre><code>import createHistory from './history'
  
  import { applyMiddleware, compose, createStore } from 'redux'
  import { routerMiddleware } from 'connected-react-router'
  import { persistStore, persistReducer } from 'redux-persist'
  import storage from 'redux-persist/es/storage'
  import thunk from 'redux-thunk'
  import createRootReducer from './reducers'
  
  export const history = createHistory();
  
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const persistConfig = {
    key: 'root',
    storage
  };
  
  const reducers = persistReducer( persistConfig, createRootReducer(history));
  const exampleMiddleware =  store =&gt; next =&gt; action =&gt; {
    // if (action.type === 'message'){
    //   do something
    // } else {
    //   next(action);
    // }
  }
  
  export default () =&gt; {
    const store = createStore(
      reducers,
      composeEnhancers(applyMiddleware(routerMiddleware(history), thunk, exampleMiddleware))
    );
    let persistor = persistStore(store)
  
    return  { store, persistor }
  }
  </code></pre>
  
  <pre><code>import React, { Component } from 'react';
  import { Provider, ReactReduxContext } from 'react-redux';
  // import { createStore } from 'redux';
  import { ConnectedRouter } from 'connected-react-router'
  import { PersistGate } from 'redux-persist/integration/react'
  
  import configureStore, { history } from './configureStore'
  import Routers from './Routers';
  
  const { persistor, store } = configureStore();
  
  class App extends Component {
    render() {
      return (
  
        &lt;Provider store={store} context={ReactReduxContext}&gt;
          &lt;div&gt; SYNTIFY &lt;/div&gt;
          &lt;PersistGate loading={null} persistor={persistor}&gt;
  
            &lt;ConnectedRouter history={history} context={ReactReduxContext}&gt;
              &lt;Routers /&gt;
            &lt;/ConnectedRouter&gt;
  
          &lt;/PersistGate&gt;
        &lt;/Provider&gt;
  
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>history.js</p>
  
  <pre><code>import createHistory from 'history/createBrowserHistory';
  export default createHistory;
  </code></pre>
  
  <p>As it showing error nothing gets rendered.</p>