Question

我想根据用户的登录状态重定向用户。在React Router示例中，它们使用onEnter。但是，onEnter的函数无法访问组件的状态。在我的例子中，用户的登录状态存储在根组件中。如何根据根组件的状态重定向用户？

例如，我的代码看起来像这样：

ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <Route path="login" component={PageLogin}/>
            <Route component={PageAuth}>
                <IndexRoute component={PageHome}/>
                ...
            </Route>
        </Route>
    </Router>
), document.getElementById('react'));

在App.js中：

class App extends React.Component {
    constructor() {
        super();
        this.state = new (Immutable.Record({...}));
    }
    ...
};

在PageAuth中：

class PageAuth extends React.Component {
    constructor(props) {
        super();

        if (!props.state.user.id) {
            ReactRouter.browserHistory.push('/login');
        }
    }
    ...
};

这会按预期重定向，但我得到Warning: setState(...): Cannot update during an existing state transition (such as within 'render'). Render methods should be a pure function of props and state.。我假设我不应该在构造函数中重定向。有更好的方法吗？

基于组件的状态在React Router中重定向

0 个答案: