反应：获取路由器上的重复状态onEnter

Question

我把这个事情弄糊涂了，很明显这是一个常见问题，但是我发现的所有解决方案都不符合我的情况。

我是一个新手的反应，并采取了以下代码：

const App = { 
    path: 'app', 
    onEnter: function (nextState, replace) { 
     console.log("onEnter", nextState); 
     /* somehow listen for redux state 
     if (!state.auth.user) { 
      replace('/login') 
     } 
     */ 
    }, 
    getChildRoutes(partialNextState, cb) { 
     require.ensure([], (require) => { 
      cb(null, [ 
       require('./routes/dostuff'), 
       require('./routes/domorestuff'), 
      ]) 
     }) 
    }, 
    getComponent(nextState, cb) { 
     require.ensure([], (require) => { 
      cb(null, require('./components/AppLayout')) 
     }) 
    } 
}; 

module.exports = App; 

按在我的OnEnter进入需要这条路之前验证评论，但我不确定如何做到这一点。

我试过如下：

const mapStateToProps = (state) => { 
    return { 
     user: state.auth.user 
    } 
}; 

module.exports = connect(
    mapStateToProps 
)(App); 

但这会产生“未捕获的错误：你必须通过一个组成部分通过连接返回的函数，而不是收到{”路径“：”应用程序“}”

下面的代码被用于创建引导应用程序和存储：

import React from 'react'; 
import {render} from 'react-dom'; 
import {createStore, applyMiddleware} from 'redux'; 
import {Provider} from 'react-redux'; 
import {applyRouterMiddleware, Router, Route, hashHistory, IndexRedirect, Redirect} from 'react-router'; 
import {syncHistoryWithStore, routerMiddleware} from 'react-router-redux'; 
import reducers from './reducers'; 

const middleware = routerMiddleware(hashHistory); 
const store = createStore(
    reducers, 
    applyMiddleware(middleware) 
); 

const history = syncHistoryWithStore(hashHistory, store); 

function scrollToTop() { 
    window.scrollTo(0, 0); 
} 

const rootRoute = { 
    childRoutes: [{ 
     path: '/', 
     component: require('./containers/App'), 
     indexRoute: {onEnter: (nextState, replace) => replace('/login')}, 
     childRoutes: [ 
      require('./routes/forgotPassword'), 
      require('./routes/login'), 
      { 
       path: '*', 
       indexRoute: {onEnter: (nextState, replace) => replace('/404')}, 
      } 
     ] 
    }] 
}; 

render(
    <Provider store={store}> 
     <Router 
      onUpdate={scrollToTop} 
      history={history} 
      routes={rootRoute} 
     /> 
    </Provider>, 
    document.getElementById('app-container') 
); 

我使用以下版本：

"react": "^15.5.4", 
"react-dom": "^15.5.4", 
"react-hot-loader": "^3.0.0-beta.6", 
"react-redux": "^5.0.5", 
"react-router": "^3.0.2", 
"react-router-redux": "^4.0.8", 
"redux": "~3.6.0", 

任何帮助将不胜感激。

Answer 1

可以做你想做的事。您需要以某种方式将商店暴露给您的应用程序文件，并且它目前超出范围。基本的想法是创建一个接受商店的功能和揭露它：

function App(store) { 
    return { 
     path: 'app', 
     onEnter: function (nextState, replace) { 
      // here you can do stuff with your store, something like store.getState() 
      if (!state.auth.user) { 
       replace('/login') 
      } 
      */ 
     }, 
     getChildRoutes(partialNextState, cb) { 
      require.ensure([], (require) => { 
       cb(null, [ 
        require('./routes/dostuff'), 
        require('./routes/domorestuff'), 
       ]) 
      }) 
     }, 
     getComponent(nextState, cb) { 
      require.ensure([], (require) => { 
       cb(null, require('./components/AppLayout')) 
      }) 
     } 
    } 
}; 

module.exports = App; 

和

const rootRoute = { 
    childRoutes: [{ 
     path: '/', 
     component: require('./containers/App')(store), 
     indexRoute: {onEnter: (nextState, replace) => replace('/login')}, 
     childRoutes: [ 
      require('./routes/forgotPassword'), 
      require('./routes/login'), 
      { 
       path: '*', 
       indexRoute: {onEnter: (nextState, replace) => replace('/404')}, 
      } 
     ] 
    }] 
}; 

让我知道如何去！