react-router“无法读取未定义的属性“推送””

IT技术 javascript reactjs react-router react-router-component
2021-03-25 10:05:06

我对react和react-router很陌生。

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

我正在使用react 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');
    }
  }

}

谁能帮我这个？谢谢。

6个回答

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

考虑使用提供（因为）withRouter的高阶组件。react-routerv2.4.0

import { withRouter } from 'react-router';

class App extends Component {

    (...)

}

export default withRouter(App);

你的Appclass将router通过props接收器，你可以安全地做this.props.router.push('/');。

这是比公认的答案更好的方法吗？
2021-05-26 10:05:06
任何解释hashHistory. 你能否也给一些解释第一段的链接，主要是模拟部分。总的来说，对于 React 和 Web 开发来说还很陌生。
2021-06-06 10:05:06
@Doug 我个人认为是这样，这就是我发布它但 YMMV 的原因:)
2021-06-16 10:05:06

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

您的应用程序的props中没有 Router 的实例，它为您提供Cannot read property 'push' of undefined.

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

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

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

文档在这里

希望这可以帮助！

hashHistory 不再受支持，您将获得 Attempted import error: 'hashHistory' is not exported from 'react-router'
2021-05-23 10:05:06
该文档链接现已失效。
2021-06-17 10:05:06

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

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

还应定义根路由。

<Route path="/" component={App}>

你可以试试下面的代码看看你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

其它你可能感兴趣的问题
上一篇使用状态react功能组件 下一篇使 document.execCommand('insertText', false, 'message') 与 Draftjs 一起工作？