创建PrivateRoute时，路由器不呈现

Question

我正在使用react context创建并用作登录服务，但是当我尝试使用Context.Consumer和Route时，Route无法呈现。

import React, { Component } from 'react';
import { BrowserRouter as Route, Redirect } from 'react-router-dom';
import { DataConsumer } from '../DataContext';
import * as ROUTES from '../../constants/routes';

const PrivateRoute = ({ component: Component, ...rest }) => {

    return (
        <DataConsumer>
            { ({ checkLoggedIn }) => (
                <Route render={props => checkLoggedIn ? React.createElement(Component, props) : <Redirect to={{ pathname: ROUTES.LOGIN }} /> }  {...rest} />
            )}
        </DataConsumer>
    )
}

export default PrivateRoute;

这是我的上下文

import React, { Component } from 'react';
const DataContext = React.createContext();

class DataProvider extends Component {
    state = {
        user: null, // object
        accessToken: '', 
        historyTransactions: [],
        expirySession: null, // unix time
    }
    checkLoggedIn = () => {
        if( this.state.expirySession > (~~(new Date().getTime() / 1000)) 
            && this.state.user !== null
            && this.state.accessToken !== '') {
                return true;
            } else {
                return false;
            }
    }
    render() {
        return(
            <DataContext.Provider value={{
                user: this.state.user,
                handleLogin: this.handleLogin,
                checkLoggedIn: this.checkLoggedIn,
                handleLogout: this.handleLogout,
                handleAccessToken: this.handleAccessToken,
                handleExpirySession: this.handleExpirySession,
                handleTransactions: this.handleTransactions,
            }}> { this.props.children } </ DataContext.Provider>
        )
    }
}
const DataConsumer = DataContext.Consumer;
export { DataProvider, DataConsumer };

当我启动该应用并尝试使用PrivateRoute时，什么都不会呈现或重定向。