ReactJS Router V4 history.push 不工作 [英] ReactJS Router V4 history.push not working

问题描述

我已经升级到 React Router V4，现在正在使用 history.push 方法.

我有一个 index.js 文件:

从react"导入React；从react-dom"导入{渲染}；从'react-router-dom'导入{ BrowserRouter, Route };从'history/createBrowserHistory'导入createBrowserHistory；const 历史 = createBrowserHistory();import { Main} from "./components/Main";从./components/About"导入{关于}；从./components/Cars"导入{汽车}；类 App 扩展了 React.Component {使成为() {返回 (<BrowserRouter history={history}><div><路由路径={"/"} component={Main}/><路线路径={"/cars"} 组件={汽车}/><路由路径={"/about"} 组件={关于}/>

</BrowserRouter>)}}render(, window.document.getElementById("app"));

然后我有另一个文件，在那里我添加了一个简单的返回到某个页面的内容，如下所示:

从react"导入React；从'history/createBrowserHistory'导入createBrowserHistory；const 历史 = createBrowserHistory();导出类汽车扩展 React.Component {导航返回(){history.push('/')}使成为() {返回(<div><h3>汽车概览</h3><p>模型:</p><button onClick={this.navigateBack} className="btn btn-primary">Back</button>

)}}

所以，我无法弄清楚这里出了什么问题.当我单击按钮时，URL 更改为 / 但仅此而已.有人可以帮我吗?

编辑

我发现，当我这样做时它可以工作:

this.props.history.push('/home')

和

但不知何故似乎错了??

当我这样做时

this.context.history.push('/home')

我得到 Cannot read property 'context' of null 但是为什么??我的 设置错误吗??

无论如何，谢谢你的帮助:)

解决方案

你必须导入 {withRouter} from 'react-router-dom' 并以这种方式导出你的类

导出默认 withRouter(Cars)

I have upgraded to React Router V4 and now struggling with the history.push method.

I have an index.js file:

import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Route } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

import { Main} from "./components/Main";
import { About } from "./components/About";
import { Cars} from "./components/Cars";


class App extends React.Component {

render() {
    return (
        <BrowserRouter history={history}>

            <div>
                <Route path={"/"} component={Main} />
                <Route path={"/cars"} component={Cars}/>
                <Route path={"/about"} component={About}/>
            </div>
        </BrowserRouter>
    )
  }
}

render(<App/>, window.document.getElementById("app"));

And then I have another file, where I added a simple to return to a certain page which looks like this:

import React from "react";
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

export class Cars extends React.Component {
  navigateBack() {
    history.push('/')
  }

  render() {
    return(
        <div>
            <h3>Overview of Cars</h3>
            <p>Model: </p>
            <button onClick={this.navigateBack} className="btn btn-primary">Back</button>
        </div>
    )
  }
}

So, I cannot figure out whats going wrong here. When I click on the button, the URL changes to / but thats all. Is there someone who can help me out?

EDIT

I found out, that it works when I do this:

this.props.history.push('/home')

and

<button onClick={this.onNavigateHome.bind(this)}

but it seems wrong somehow??

when I do

this.context.history.push('/home')

I get Cannot read property 'context' of null but why?? Is my <BrowserRouter> setup wrong??

Anyway, thanks for the help :)

解决方案

You have to import {withRouter} from 'react-router-dom' and export your class in this way

export default withRouter(Cars)

这篇关于ReactJS Router V4 history.push 不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！