ReactJS Как использовать реквизиты маршрутизатора внутри файла app.js

Question

Файл app.js моего проекта выглядит следующим образом.Для всех других компонентов я использовал this.props.history.push('/') для перенаправления на определенный путь, и он работает, когда эти компоненты получают props.Но в этом app.js я попытался утешить значения реквизитов внутри constructor, componentWillMount и render, но все дает нулевой массив.Есть ли способ использовать this.props.history.push('/') внутри app.js?

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 в export default