how to access history object in new React Router v4

问题

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.

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

回答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>
  );
}

回答3:

I had this problem for a while and it was simply not having the withRouter connection.

import { withRouter } from 'react-router';


class Sample extends Component{

  render()
  {

     <button type="button" onClick={()=>{
                                this.props.history.push('/');
                                window.location.reload();    }}>
  }
}

export default withRouter(Sample);

来源：https://stackoverflow.com/questions/43107912/how-to-access-history-object-in-new-react-router-v4

标签

javascript

reactjs

react-router