라우터를 재 렌더링하는 대신 라우터를 다시 렌더링합니다.

Question

나는 리얼 라우터를 사용하는 응용 프로그램에서 작업하고 있습니다. 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'}}/ 
    } 
    }}/> 
}) 

이 좋은 작품을

그러나 isAuthenticated 상태가 변경되면 라우터가 HomePage 구성 요소에서 render 메서드를 호출하는 대신 경로를 다시 렌더링한다는 것을 알았습니다. 즉, 사용자가 일부 페이지에서 홈 페이지로 이동할 때만 응용 프로그램이 인증 확인을 수행하지만 홈 페이지에서 한 번 수행하면 검사가 더 이상 수행되지 않습니다.

내가 현재 가지고있는 유일한 해결 방법은 인증 체크를 구성 요소의 render 기능으로 이동하는 것입니다 (이는 분명히 속한 곳이 아닙니다).

어떻게하면 라우터가 상태가 변경 될 때 경로가 참조하는 구성 요소를 다시 렌더링하지 않고 경로를 다시 렌더링하게 할 수 있습니까?

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