时间戳

首页 > 解决方案 > 无法在反应中读取属性“推送”

javascript - 无法在反应中读取属性“推送”

问题描述

我正在尝试获得一个将在一秒钟后出现的组件。组件本身只有 H1。我使用路由器，所以在我看来最正确的解决方案是使用 history.push 但它对我不起作用，我做错了什么？

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import {withRouter} from 'react-router-dom'
import './App.css';
import Hello from './comp/Hello';
class App extends Component {
  render() {
  return (
      <Router>
      <div className="App">
      </div>
      <Route path="/hello" component={Hello} />
      </Router>
    );
  }
  componentWillMount() {
  this.hello()
  }
  hello(){
    setTimeout(() => {
     this.props.history.push('/hello')
    }, 1000);
  }
}
export default App;



===========================the Component========================




import React, { Component } from 'react';
class App extends Component {
  render() {
    return (    
      <div className="App">
      <h1>hi</h1>
      </div>    
    );
  }
}

export default App;

标签： javascriptreactjs

解决方案

对于接收history道具的组件，您需要两件事：

  1. Router必须位于顶层，尤其是对Route、Link和的所有调用withRouter

  2. 需要 prop 的组件history必须由 a 渲染Route，例如，<Route component={ComponentThatNeedsHistoryProp} ...> 或者用withRouter.

在您的情况下，您似乎不能依赖要传递的路由道具，因此我们需要使用withRouter. 它应该看起来像这样（未显示导入）：

// App.js
class App = () => (
  <div className="App">
    <Router>
      <Hello />
    </Router>
  </div>
)

// Hello.js
class Hello extends Component {
  render() {
    return <h1>hi</h1>
  }

  componentWillMount() {
    this.hello()
  }

  hello(){
    setTimeout(() => {
      this.props.history.push('/hello')
    }, 1000);
  }
}
export default withRouter(Hello);

推荐阅读