Render方法在反應路由器V4

我試圖實現與反應路由器V4和Redux的私人路線，但渲染道具出於某種原因返回null返回null。如果有人幫我弄清楚什麼是錯的，我會非常感激。路由器：Render方法在反應路由器V4

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)

來源

2017-05-07 Umbrella

你可能會面臨的問題做出反應路由器與Update Blocking。這是因爲Redux避免重新渲染並調用mapStateToProps。

爲了防止這種行爲，您可以在react-redux connect函數中傳遞選項pure: false。

例子：

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

，您可以前往React Redux API documentation看到此選項的詳細信息。

來源

2017-05-07 17:10:47

謝謝，不知道的是，後來要去閱讀起來就可以了。我通過刪除TopSecretRoute組件來解決問題，並在高階組件中封裝了我需要的行爲，這也是一個選項。 – Umbrella

是的，有不止一種方法來解決這個問題。很高興它的工作。 –

Render方法在反應路由器V4

回答

相關問題