Question

我开始使用create-react-app，并尝试通过Gatekeeper组件设置基于身份验证的路由。现在Gatekeeper组件唯一能做的就是呈现它的子节点。我使用redux从状态树中获取当前用户并将其保存为currentUser。我将使用它来验证以后对子路由的访问。

import React from 'react';
import { connect } from 'react-redux';
import { subscribeToCurrentUser } from '../../reducers/authentication';

class Gatekeeper extends React.Component {
    componentDidMount() {
        this.props.subscribeToCurrentUser();
    }

    render() {
        return this.props.children
    }
}


function mapStateToProps(state) {
    return {
        currentUser: state.currentUser
    }
}

const GatekeeperContainer = connect(mapStateToProps, {subscribeToCurrentUser})(Gatekeeper);

export default GatekeeperContainer;

如果我最初加载应用，请说/account所有内容都按预期加载。但是，如果我通过/templates/123导航到<NavLink>，则网址会发生变化，但<Template>组件无法呈现。使用React Dev Tools进行检查，向我显示Gatekeeper组件下方每条路线的子项为null。如果我刷新页面，则<Template>组件按预期呈现，但导航回/account不会呈现<AccountPage>组件。

<Provider store={store}>
    <Router history={history}>
        <div>
            <Route exact path="/" component={LandingPage} />
            <Layout>
                <Route path="/login" component={Login} />
                <Gatekeeper>
                    <Switch>
                        <Route path="/home" component={HomePage} />
                        <Route path="/templates/:templateID" component={Template} />
                        <Route path="/account" component={AccountPage} />
                    </Switch>
                </Gatekeeper>
            </Layout>
        </div>
    </Router>
</Provider>

我在这里做错了什么？

React路由器不呈现非活动路由组件

0 个答案: