how to access history object in new React Router v4

Question

I have tried all the suggested ways in other threads and it is still not working which is why I am posting the question.

So I have history.js looking like this

import { createBrowserHistory } from 'history';

export default createBrowserHistory;

My index.js

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

Home.js Looks like this

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 (
            <div className="main-content home">
                <hr />
                <h3>Featured Teachers</h3>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" placeholder="Name"/>
                    <input type="text" placeholder="Topic"/>
                    <button type="submit"> Submit </button>
                </form>
            </div>
        );
    }
}

export default Home;

Home.js is actually routed in app.js which is routed in index.js.

The problem is that I cannot access history object anywhere.

The ways I have tried are as below

1) this.context.history.push(path) in home.js - cannot access context of undefined

2) this.props.history.push(path) in home.js - cannot access props of undefined

3) browserHistory.push(path) in index.js - this is deprecated now

4) the way above - _history2.default.push is not a function

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 https://reacttraining.com/react-router/web/api/Route/Route-render-methods

I know the previous v2 or v3 way of accessing history is also deprecated.

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

Answer 1

Looks to me like you might be missing a withRouter connection. this would make the history props available to this component

...

import { withRouter } from 'react-router'

class Home extends Component {
  functionMethod() {
    const { history: { push } } = this.props;
    doStuff();
    push('/location');
  }
  ...
}

export default withRouter(Home);

https://reacttraining.com/react-router/web/api/withRouter

Answer 2

use the hook: useHistory

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}