导航到没有 react-router 的 URL - “_this.props.history is undefined"；错误 [英] Navigate to the URL without react-router - "_this.props.history is undefined" error

问题描述

我正在尝试在加载应用程序时使用令牌检查真实性，当用户未获得授权时，将他导航到登录页面.这个方法被插入到 Navbar 组件中，因为它在应用程序的每个页面上，所以它会随时被调用.我试图将导航栏组件放在路由器内，但它不起作用.带有路由的 App.js:

 
<HomeNavbar history={this.props.history}/><路由器><开关><路由精确路径="/login" component={LoginPage}/><路由精确路径=/addEvent"组件={addEvent}/><路由精确路径="/register" component={RegisterPage}/><路由精确路径="/members" component={MembersList}/><路由精确路径="/event/:id" component={EventDetails}/><路由精确路径="/events" component={EventsList}/><路由精确路径="/user/:id" component={UserDetails}/><Route path="/" component={EventsList}/></开关></路由器>

如您所见，HomeNavbar 位于 外部，但我希望这样，因为它显示在每个页面上.如何从该组件导航到另一个页面?

解决方案

在这种情况下，你需要使用 React Router 的 withRouter 方法.这将创建一个接收所有路由器道具的高阶组件.因此，您将拥有以下内容，而不是 HomeNavbar:

import { withRouter } from 'react-router-dom'//用路由器创建一个新的家庭导航栏.const HomeNavbarWithRouter = withRouter(HomeNavbar)//创建此后，您的 HomeNavbar 组件将接收所有路由器道具//例如`history、match、location`//最后，改为挂载 HomeNavbarWithRouter:<HomeNavbarWithRouter/>

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?

解决方案

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

这篇关于导航到没有 react-router 的 URL - “_this.props.history is undefined"；错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！