ReactJS 如何在 app.js 文件中使用 Router 的 props

Question

我的项目的app.js文件如下。对于所有其他组件，我使用 this.props.history.push('/') 重定向到特定路径，并且它在这些组件接收 props 时工作。但在这个 app.js 中，我尝试控制台 constructor、componentWillMount 和 render 内的 props 值，但都给出了 null 数组。有没有办法在 app.js 中使用 this.props.history.push('/') ？

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    console.log(this.props)
  }

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

  render() {
    console.log(this.props)
    return (
        <Router>
            <div className="App">
                <Route exact path='/' render={(props) => <Login {...props} />} />
                <Route exact path='/dashboard' render={(props) => <Dashboard {...props}/>}/>
            </div>
        </Router>
    );
  }
}

export default App;

Answer 1

使用withRouter

import { withRouter } from 'react-router-dom'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    console.log(this.props)
  }

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

  render() {
    console.log(this.props)
    return (
        <Router>
            <div className="App">
                <Route exact path='/' render={(props) => <Login {...props} />} />
                <Route exact path='/dashboard' render={(props) => <Dashboard {...props}/>}/>
            </div>
        </Router>
    );
  }
}

export default withRouter(App);

这将使您能够访问历史对象并允许您推送到新路线。 (我在发布之前进行了测试和验证，所以我知道这是有效的)。

将其导入到文件顶部，然后将 App 包含在导出默认值

中