React-router onEnterがトリガーしない

Question

Reactアプリケーションのルートを設定しています。私のホームページに入るとき、私はAuth0からいくつかのデータを記録したいと思います。そうするために、私は単なるonEnter属性のユーザーですが、うまくいかないようです。

import React from 'react' 
import {Route, IndexRedirect} from 'react-router' 
import AuthService from 'utils/AuthService' 
import Container from './Container' 
import Home from './Home/Home' 
import Login from './Login/Login' 

[...] 

const requireAuth = (nextState, replace) => { 
    if (!auth.loggedIn()) { 
    replace({ pathname: '/login' }) 
    } 
} 

const parseAuthHash = (nextState, replace) => { 
    console.log('LOG SOMETHING YOU IDIOT'); 
    if (/access_token|id_token|error/.test(nextState.location.hash)) { 
    auth.parseHash(nextState.location.hash) 
    } 
} 

export const makeMainRoutes =() => { 
    return (
    <Route path="/" component={Container} auth={auth}> 
     <IndexRedirect to="/home" /> 
     <Route path="home" component={Home} onEnter={requireAuth} /> 
     <Route path="login" component={Login} onEnter={parseAuthHash} /> 
    </Route> 
) 
} 

export default makeMainRoutes 

何らかの理由で、私が/ loginになっているときに、コンソールに何も表示されません。私はあまりにも警戒してみて、トリガーしません。私は何か見落としてますか ？

Answer 1

私はあなたがフォーカス取得時と離れて行っているV4を、使用している推測している：https://reacttraining.com/react-router/web/api/Route

は代わりに、レンダリング小道具を使用することです。彼らの新しいドキュメントはこの例を持っている：https://reacttraining.com/react-router/web/example/auth-workflow

ここでの主なアイデアです：

const PrivateRoute = ({ component, ...rest }) => (
    <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
     React.createElement(component, props) 
    ) : (
     <Redirect to={{ 
     pathname: '/login', 
     state: { from: props.location } 
     }}/> 
    ) 
)}/> 
)