导航到没有react-router的URL-“ _this.props.history未定义”错误

Question

I'm trying to check authentity using tokens while loading the app and when user is not authorized navigate him to the log-in page. This method is inserted into Navbar component because it is on every page in the app, so it will be called any time. I tried to place the navbar component inside the Router but it doesn't work. The App.js with routing:

      <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>

As you can see HomeNavbar is outside the but I want it that way because it displays on every page. How can I navigate to the other page from that component?

Answer 1

In this case, you need to use the withRouter method from React Router. This will create a higher order component which receives all the router props. So instead of HomeNavbar , you'll have this:

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

I think you can do it like this

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);

This will make history available in your component props.