コンポーネントを再レンダリングするのではなく、ルータを再レンダリングするルータ

Question

私はReact Routerを使用しているアプリケーションで作業していますが、Reduxストアの変更によって現在のルートが参照しているコンポーネントが再描画されているルート自体を再レンダリングするのではなく、

この問題を説明するには、私は、ユーザーが現在ログインしているかどうかを確認するPrivateRouteを実装している、それはこのようなものに見える、それは最も基本的なフォームのでは：。

<PrivateRoute path="/" component={HomePage}/> 

：私は今、このような何かを言うことができるので、これは素晴らしい作品

const PrivateRoute = ({component: Component, ...rest}) => { 
    return <Route {...rest} render={(props) => { 
    const state = store.getState() 

    if (state.isAuthenticated) { 
     return <Component {...props}/> 
    } 
    else { 
     return <Redirect to={{pathname: '/login'}}/ 
    } 
    }}/> 
}) 

を

しかし、の状態が変更され、リアクタールーターがHomePageコンポーネントのrenderメソッドを呼び出すのではなく、ルートを再レンダリングすることに気付きました。つまり、ユーザーがあるページからホームページに移動したときにアプリケーションが認証チェックを行いますが、ホームページではそのチェックはもう行われません。

私は現時点で、認証チェックをコンポーネントの機能（明らかに所属していない場所）に移動することしかできません。

React Routerは、状態が変わったときにルートが参照するコンポーネントを再レンダリングするのではなく、ルートを再レンダリングさせることができますか？

Answer 1

ルートで認証チェックを実装するのではなく、高次コンポーネントを使用して問題を解決することができました。

function withEnsureAuthentication(WrappedComponent) { 
    return class extends React.Component { 
    render() { 
     if (this.props.store.isAuthenticated === false) { 
     return <Redirect to={{pathname: '/login'}}/> 
     } 

     return <WrappedComponent {...this.props}/> 
    } 
    } 
} 

あなたは今、通常のRouteを使用しますが、コンポーネントにwithEnsureAuthenticationを適用することができます。

const HomePage = withEnsureAuthentication(Home) 

<Route path="/home" component={HomePage}/>