我从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 所有内容都按预期加载 . 但是，如果我通过 <NavLink> 导航到 /templates/123 ，则URL会更改，但 <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>

What am I doing wrong here?

reactjs redux react-router