如何在新的React Router v4中访问历史对象

时间:2017-03-30 03:20:14

标签: javascript reactjs react-router

我已经在其他主题中尝试了所有建议的方法,但它仍然无效,这就是我发布问题的原因。

所以我history.js看起来像这样

import { createBrowserHistory } from 'history';

export default createBrowserHistory;

我的index.js

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

Home.js看起来像这样

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实际上是在app.js中路由的,它在index.js中路由。

问题是我无法在任何地方访问历史记录对象。

我尝试的方法如下

1)home.js中的this.context.history.push(path) - 无法访问未定义的上下文

2)home.js中的this.props.history.push(path) - 无法访问未定义的道具

index.js中的

3)browserHistory.push(path) - 现在不推荐使用

4)上面的方式 - _history2.default.push不是一个函数

我上面尝试的所有方法都不起作用。第二个是最奇怪的,因为我应该能够根据文档https://reacttraining.com/react-router/web/api/Route/Route-render-methods

在任何地方访问历史对象作为道具

我知道以前的v2或v3访问历史记录的方式也已弃用。

那么知道如何在React Router v4中访问历史对象的人能回答这个问题吗?感谢。

3 个答案:

答案 0 :(得分:24)

在我看来,您可能错过了withRouter连接。这将使历史道具可用于此组件

...

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

答案 1 :(得分:0)

使用钩子: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>
  );
}

答案 2 :(得分:0)

我有一段时间这个问题了,它根本没有withRouter连接。

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

`