Question

我正在尝试获取将在一秒钟后出现的组件。组件本身仅具有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;

Answer 1

我认为您需要使用withRouter hook包装您的组件。尝试如下，

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 withRouter(App);

Answer 2

很难确切知道发生了什么，通常我的经验中只有子组件会遭受此类错误的困扰，因为props.history没有被传递。不过，在大多数情况下，Apps组件应该是主要组件。

无论如何，我建议您同时尝试这种方法：

import { BrowserRouter as Router, Route, Link, Redirect } from "react-router-dom";
...
hello(){
    setTimeout(() => {
     return <Redirect to={{
        pathname: "/hello",
        state: {
          optionalStateToPass,
        },
      }} />;
    }, 1000);
  }
...

Answer 3

要使组件接收history道具，您需要做两件事：

Router必须在最顶层，首先是对Route，Link和withRouter
需要道具history的组件必须由Route呈现，例如<Route component={ComponentThatNeedsHistoryProp} ...> OR 用withRouter包装。

在您的情况下，似乎您不能依靠route props进行传递，因此我们需要使用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);

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

3 个答案: