Я использую реагирующий контекст для создания и использования его в качестве службы входа, но когда я пытаюсь использовать 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, ничего не отображается и не перенаправляется.