2017-05-07 23 views
0

私はリアクションルータv4とレフィックスでプライベートルートを実装しようとしていますが、レンダリングプロペラは何らかの理由でnullを返します。誰かが何が間違っているのか理解してくれたら、とても感謝しています。 ルータ:リアクションルータv4でレンダリングメソッドが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) 

enter image description here

答えて

1

あなたはおそらく問題に直面しているルータはUpdate Blockingを持って反応します。これは、Reduxがレンダリングを避け、mapStateToPropsを代わりに呼び出すためです。

この現象を回避するには、pure: falseをreact-redux connect関数に渡すことができます。

例:

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

あなたはこのオプションの詳細を表示するReact Redux API documentationに向かうことができます。

+0

ありがとう、それについては知らなかったので、あとで読むことにします。 TopSecretRouteコンポーネントを削除し、必要な動作をオプションである上位コンポーネントにカプセル化することで問題を解決しました。 – Umbrella

+0

ええ、それを修正する方法は複数あります。それがうれしかった。 –

関連する問題