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);

但这会产生“未捕获错误：您必须将组件传递给connect返回的函数。而是收到{”path“：”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')},
            }
        ]
    }]
};

让我知道它是怎么回事！

React：在路由器onE

1 个答案: