Перейдите к URL-адресу без реакции-маршрутизатора - ошибка «_this.props.history не определена»

Question

Я пытаюсь проверить подлинность с помощью токенов при загрузке приложения, а когда пользователь не авторизован, перейдите на страницу входа. Этот метод вставляется в компонент Navbar, потому что он есть на каждой странице приложения, поэтому он будет вызываться в любое время. Я попытался разместить компонент navbar внутри маршрутизатора, но он не работает. App.js с маршрутизацией:

      <div className="App">
       <HomeNavbar history={this.props.history}/>
       <Router>
       <Switch>
         <Route exact path="/login" component={LoginPage}/>
         <Route exact path="/addEvent" component={addEvent}/>
         <Route exact path="/register" component={RegisterPage}/>
         <Route exact path="/members" component={MembersList}/>
         <Route exact path="/event/:id" component={EventDetails}/>
         <Route exact path="/events" component={EventsList}/>
         <Route exact path="/user/:id" component={UserDetails}/>
         <Route path="/" component={EventsList}/>
       </Switch>
       </Router>
      </div>

Как вы можете видеть, HomeNavbar находится за пределами, но я хочу, чтобы это так, потому что он отображается на каждой странице. Как я могу перейти на другую страницу из этого компонента?

Answer 1

В этом случае вам нужно использовать метод withRouter от React Router.Это создаст компонент более высокого порядка, который получит все реквизиты маршрутизатора.Таким образом, вместо HomeNavbar вы получите:

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

// create a new home navbar with router.
const HomeNavbarWithRouter = withRouter(HomeNavbar)

// after creating this, your HomeNavbar component will receive all the router props // such as `history, match, location`

// Finally, mount the HomeNavbarWithRouter instead:

<HomeNavbarWithRouter />

Answer 2

Я думаю, вы можете сделать это следующим образом

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

class HomeNavbar extends React.Component {
    redner() { return (<div>Whatever should be here</div>); }
}

export default withRouter(HomeNavbar);

Это сделает историю доступной в ваших компонентах.