how to access history object in new React Router v4 : <p>I have tried all the suggested ways in other threads and it is still not working which is why I am posting the question.</p>

<p>So I have <code>history.js</code> looking like this</p>

<pre><code>import { createBrowserHistory } from 'history';

export default createBrowserHistory;
</code></pre>

<p>My <code>index.js</code></p>

<pre><code>render((
        &lt;Router history={history}&gt;
            &lt;div&gt;
                &lt;Route component={App}/&gt;
            &lt;/div&gt;
        &lt;/Router&gt;
    ), document.getElementById('root')
);
</code></pre>

<p><code>Home.js</code> Looks like this</p>

<pre><code>class Home extends Component {
    handleSubmit(e) {
        e.preventDefault();

        let teacherName = e.target.elements[0].value;
        let teacherTopic = e.target.elements[1].value;
        let path = `/featured/${teacherName}/${teacherTopic}`;
        history.push(path);

    }

    render() {
        return (
            &lt;div className="main-content home"&gt;
                &lt;hr /&gt;
                &lt;h3&gt;Featured Teachers&lt;/h3&gt;
                &lt;form onSubmit={this.handleSubmit}&gt;
                    &lt;input type="text" placeholder="Name"/&gt;
                    &lt;input type="text" placeholder="Topic"/&gt;
                    &lt;button type="submit"&gt; Submit &lt;/button&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        );
    }
}

export default Home;
</code></pre>

<p>Home.js is actually routed in app.js which is routed in index.js.</p>

<p>The problem is that I cannot access history object anywhere.</p>

<p>The ways I have tried are as below</p>

<p>1) <code>this.context.history.push(path)</code> in home.js - cannot access context of undefined</p>

<p>2) <code>this.props.history.push(path)</code> in home.js - cannot access props of undefined</p>

<p>3) <code>browserHistory.push(path)</code> in index.js - this is deprecated now</p>

<p>4) the way above - _history2.default.push is not a function</p>

<p>None of the methods that I have tried above works. The second was the strangest as I should be able to access history object as props anywhere according to the documentation <a href="https://reacttraining.com/react-router/web/api/Route/Route-render-methods" rel="noreferrer">https://reacttraining.com/react-router/web/api/Route/Route-render-methods</a></p>

<p>I know the previous v2 or v3 way of accessing history is also deprecated.</p>

<p>So can someone who knows how to access history object in React Router v4 answer this question? Thanks.</p>
