导航到没有 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 />