11

我对反应和反应路由器很陌生。

react 的问题就在这里，在我的应用程序的某些页面上，react-router 正在工作，并且一些给出如下错误：“无法读取未定义的属性'push'”。

我正在使用反应 0.14.1

我的路由代码如下所示：

render(
<Router history={hashHistory}>
  <Route path="/" component={Loginpanel}/>
  <Route path="Index" component={Index}/>
  <Route path="Form" component={Form} />
  <Route path="Checkindex" component={Index}/>

  <Route path="Signup" component={Signup}/>
  <Route path="Admin" component={Admin}/>
  <Route path="AdminEditDetails" component={AdminEditDetails}/>
  <Route path="AdminDetails" component={AdminDetails}/>


</Router>,
document.getElementById('js-main'));

我的组件现在是这样的：

class  App extends React.Component {

  constructor(props) {
    super(props);
    this.state= {      
      comments: AppStore.getAll();
    };
  }

  componentWillMount() {  
    var length = this.state.comments.length;
    var firstnumber = length - 4;

    if(length == 0){
      console.log("here comes");
      this.props.router.push('/');
    }
    else{
      console.log('work normally');
    }
  }

}

谁能帮我这个？谢谢。

4

7 回答 7

15

直接使用hashHistoryfromreact-router当然是一种选择，但它使单元测试更加痛苦。浏览器历史通常不会在运行的上下文测试中可用，并且模拟一个道具比模拟一个全局 API 更容易。

考虑使用提供 (since )withRouter的高阶组件。react-routerv2.4.0

import { withRouter } from 'react-router';

class App extends Component {

    (...)

}

export default withRouter(App);

您的App班级将router通过道具接收，您可以安全地这样做this.props.router.push('/');。

于 2016-08-27T20:22:33.640 回答
10

如果您正在使用部分组件并像这样调用它，<Header />那么您应该将其替换为<Header {...this.props} />

于 2018-07-30T06:14:20.560 回答
4

您的应用程序的道具中没有 Router 的实例，这给了您Cannot read property 'push' of undefined.

我假设您正在导入 withRouter 以获取路由器的实例，因此如果您仍想使用它，则需要将组件包装在其中...（此处示例但不建议）

相反，以编程方式导航的更好方法是使用

import { hashHistory } from 'react-router;' ... hashHistory.push('/');在您的componentWillMount生命周期事件中。

文档在这里

希望这可以帮助！

于 2016-08-27T18:08:55.887 回答
1

您正在使用 hashHistory。以下代码应该可以工作。

import { hashHistory } from 'react-router';
hashHistory.push('/');

还应该定义根路由。

<Route path="/" component={App}>
于 2016-08-27T18:11:39.537 回答
1

你可以试试下面的代码看看你router props的工作与否

componentWillMount() {

var length = this.state.comments.length;
var firstnumber = length - 4;
if(length == 0){
    console.log("here comes");
  if(this.props.router !== undefined) {
    this.props.router.push('/');
  } else {
    console.log(this.props.router);
  }
}
else{
    console.log('work normally');
}
}

您也可以访问他们的文档以从以下网址获取更多信息 https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

于 2016-08-27T18:13:15.283 回答
0

您可以从高阶组件访问history道具，并使用对象上的 push 方法来推送您想要的路由。witRouterhistory

import { withRouter } from "react-router";

class App extends React.Component {

    componentWillMount() {
        ...
        this.props.history.push('/');
        ...
    }

}

export default withRouter(App);
于 2021-10-17T06:22:12.123 回答
-3

添加两行。

import { withRouter } from "react-router-dom";
this.props.history.push("/welcomePage");
于 2020-05-10T05:59:23.490 回答