onEnter가 React-Router에서 호출되지 않음

onEnter가 React-Router에서 호출되지 않음

좋아, 이젠 지긋지긋해
그onEnter방법이 작동하지 않습니다.왜 그런 줄 알아?

// Authentication "before" filter
function requireAuth(nextState, replace){
  console.log("called"); // => Is not triggered at all 
  if (!isLoggedIn()) {
    replace({
      pathname: '/front'
    })
  }
}

// Render the app
render(
  <Provider store={store}>
      <Router history={history}>
        <App>
          <Switch>
            <Route path="/front" component={Front} />
            <Route path="/home" component={Home} onEnter={requireAuth} />
            <Route exact path="/" component={Home} onEnter={requireAuth} />
            <Route path="*" component={NoMatch} />
          </Switch>
        </App>
      </Router>
  </Provider>,
  document.getElementById("lf-app")

편집:

이 메서드는 콜할 때 실행됩니다.onEnter={requireAuth()}하지만 분명히 그것은 목적이 아닙니다.또한 원하는 파라미터도 얻을 수 없습니다.

onEnter더 이상 존재하지 않는다react-router-4를 사용해 주세요.<Route render={ ... } />원하는 기능을 얻을 수 있습니다.예시는 당신의 구체적인 시나리오가 있다고 생각합니다.당신의 것과 일치하도록 아래를 수정했습니다.

<Route exact path="/home" render={() => (
  isLoggedIn() ? (
    <Redirect to="/front"/>
  ) : (
    <Home />
  )
)}/>

react-router-v4에서onEnter,onUpdate,그리고.onLeavev2/v3에서v4로의 이행에 관한 매뉴얼에 따라가 삭제됩니다.

on*특성.
리액트 라우터 v3는onEnter,onUpdate,그리고.onLeave방법들.이는 기본적으로 React의 라이프 사이클 방법을 재현한 것입니다.

v4에서는 에 의해 렌더링된 컴포넌트의 라이프 사이클 방법을 사용해야 합니다.<Route>대신onEnter, 를 사용합니다.componentDidMount또는componentWillMount사용처onUpdate, 를 사용할 수 있습니다.componentDidUpdate또는componentWillUpdate(혹은 아마도)componentWillReceiveProps).onLeave로 대체할 수 있다componentWillUnmount.

위해서react-router-6그Redirect컴포넌트는 로 교환되었습니다.

아래userState사용자 로그인 여부에 따라 늘 또는 입력됩니다.예를 들어 Redux 상태가 될 수 있습니다.

<Route path="/protectedRoute"
            element={userState ? <protectedComponent/> : <Navigate to="/login"/>}/>

언급URL : https://stackoverflow.com/questions/42768620/onenter-not-called-in-react-router