reactjs

Question

我有这个代码。我想要做的是当我点击一个按钮 'feature' 时它会带我去索引路线。但是，React 一直在说 'can not read property push of undefined' 我做错了什么？

route.js

import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, hashHistory, IndexRoute } from "react-router";

import Layout from "./page/Layout";
import Features from "./page/Features";
import Features from "./page/archive";

const app = document.getElementById('app');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Features} />
            <Route path="archive" component={Archive} />
        </Route>
    </Router>, app);

布局组件

import React from "react";
import {Link, Router, Route, hashHistory} from "react-router";
export default class Layout extends React.Component{
    navigate(){
        this.context.router.push('/');
    }
    render(){ 
        return(
            <div>
                {this.props.children}
                <button onClick={this.navigate.bind(this)}>feature</button>
            </div>
        )
    }
}

package.json - 部分

"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.1"
 "history": "^2.0.1",

------------更新乔丹的回答------------

Answer 1

我使用 browserHistory 而不是 HashHistory。然后我只需要做以下事情：

import { browserHistory } from 'react-router'
// ...
// ...

   navigate(){
        browserHistory.push('/');
    }

Answer 2

您需要将 route.js 页面更改为

import {Router, browserHistory} from 'react-router';

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Features} />
            <Route path="archive" component={Archive} />
        </Route>
    </Router>, app);

然后你可以在任何你想导航的地方使用

 import {Router, browserHistory} from 'react-router';

 browserHistory.push('/');

react-router 文档鼓励您使用 browserHistory 而不是 hashHistory

hashHistory uses URL hashes, along with a query key to keep track of state. hashHistory requires no additional server configuration, but is generally less preferred than browserHistory.

Answer 3

更改布局组件以将导航分配给 ES6 lambda。这是设置 this

的正确值所必需的

import React from "react";
import {Link, Router, Route, hashHistory} from "react-router";
export default class Layout extends React.Component{
    navigate = () => {
        this.context.router.push('/');
    }

    render(){ 
      return(
        <div>
            {this.props.children}
            <button onClick={this.navigate.bind(this)}>feature</button>
        </div>
      )
    }
}

Answer 4

export default class Layout extends React.Component{

    navigate = () => {
        this.context.router.push('/');
    }
    render(){ 
        return(
            <div>
                {this.props.children}
                <button onClick={this.navigate.bind(this)}>feature</button>
            </div>
        )
    }
}
Layout.contextTypes = {
    router: PropTypes.object.isRequired
}

Answer 5

您似乎用 /archives 目录中的任何内容覆盖了功能导入。在您发布的代码中，您有：

import Features from "./page/Features";
import Features from "./page/archive";

Answer 6

在 React Router v4 中，您不再需要为路由器提供历史记录。相反，您只需使用 'react-router-dom' 中的 BrowserRouter 或 HashRouter。但这使得当您不在 React 组件中时如何将溃败推送到您的历史记录变得不清楚。

解决方案是使用 history 包。

只需像这样导入 createHistory：

import createHistory from 'history/createBrowserHistory'

或者我的做法是这样的：

import { createHashHistory } from 'history'

然后创建您的历史记录

export const history = createHashHistory()

现在您可以推送它了：

history.push('/page')

我希望这对遇到这个问题的其他人有所帮助。 None 个当前答案满足了我的需要。

Answer 7

这可能不是指上面的例子，但我有同样的错误。经过大量调试后，我发现我的内部组件无法访问历史记录。确保您的历史记录可以访问。

//main.js

<BrowserRouter>
    <div>
        <Route path="/" component={Home}/>
        <Route path="/techMap" component={TechMap}/>
    </div>
 </BrowserRouter>

//app.js

<div>
   <TechStack history= {this.props.history}/>
</div>

//techstack.js

<div>
    <span onClick={this.search.bind(this)}>
    </span>
 </div>
)

search(e){
 this.props.history.push('/some_url');
}

TechStack 是我的内部组件。

之前我可以在 app.js 中获取历史记录，但在 tech.js 中不能。但是在以历史形式传递道具之后，我得到了 tech.js 中的历史并且路由有效

Answer 8

您不再需要使用 browserHistory。 React-router-dom 注入你的组件路由相关的道具和上下文。其中一个道具是 'history' 并且在这个历史对象上是一个函数推送，你可以调用它并传递你想要导航到的路线。

Class 基础组件中的示例，您可以创建如下所示的函数作为 onClick 处理程序以重定向到特定 link

redirectToPage() {
 this.props.history.push('/page'); OR
 this.context.router.history.push('/page');
}

在基于函数的无状态组件中

redirectToSessionStatePage() {
 props.history.push('/page');OR
 context.router.history.push('/page');
}

Answer 9

使用 React router v4，您需要将组件包装在 withRouter 中。然后您可以访问组件中的历史记录。执行以下操作：

import { withRouter } from 'react-router-dom';
...
...
export default withRouter(MyComponent);

Answer 10

从 'react-router-dom' 导入 {withRouter}；

导出默认值 withRouter(AppName);

Answer 11

通常，当您尝试从嵌套组件重定向时会出现此错误。

有几种方法可以修复它

使用 react-dom 您可以从 react-router-dom 导入 withRouter 组件，然后像往常一样使用 this.props.history.push 而不是通常的导出默认值 'class' 我们将使用 export default withRouter(class);繁荣问题解决。

reactjs - 无法读取未定义的属性推送

reactjs - can not read property push of undefined

javascript

react-router

reactjs - 无法读取未定义的 属性 推送

reactjs - can not read property push of undefined

javascript

reactjs

react-router

reactjs - 无法读取未定义的属性推送