반응 라우터 v4에서 렌더링 메서드가 null을 반환합니다.

Question

반응 라우터 v4와 redux를 사용하여 개인 경로를 구현하려고하지만 어떤 이유로 렌더 소품이 null을 반환합니다. 누군가 내가 틀린 것을 알아 내도록 도와 주면 매우 감사 할 것입니다. 라우터 :

const router = (
      <Provider store={store}> 
      <BrowserRouter history={history}> 
       <App> 
       <Route exact path="/" component={UserGrid}/> 
       <Route path="/login" component={Login}/> 
       <Route exact path="https://stackoverflow.com/users/:userId" component={UserPage}/> 
       <Route path="/registration" component={RegistrationPage}/> 
       <TopSecretRoute path="/topSecret" component={SecretComponent}/> 
       </App> 
      </BrowserRouter> 
      </Provider> 

TopSecretRoute.js :

const TopSecretRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
    props.session.registered ? (
     <Component {...props}/> 
    ) : (
     <Redirect to={{ 
     pathname: '/login', 
     state: { from: props.location } 
     }}/> 
    ) 
)}/> 
) 

const stateToProps = ['session'] 
export default createContainer(stateToProps,TopSecretRoute) 

Answer 1

당신은 아마 문제를 직면하고는 라우터가 Update Blocking와이 반응한다. 이것은 Redux가 re-renders를 피하고 대신 mapStateToProps를 호출하기 때문에 발생합니다.

이 문제를 방지하려면 옵션을 react-redux 연결 함수에 전달하면됩니다.

예 :이 옵션에 대한 자세한 내용을 볼 수 React Redux API documentation에 머리 수

connect(mapStateToProps, null, null, { pure: false })(Component); 

.