导航到没有 react-router 的 URL

Question

我正在尝试在加载应用程序时使用令牌检查真实性，当用户未经授权时，将他导航到登录页面。这个方法被插入到 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

在这种情况下，您需要使用withRouterReact 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 />