import React, { PureComponent, createContext } from 'react';
import {
BrowserRouter as Router,
Route,
Link,
Redirect,
} from 'react-router-dom'
// Initialize a context
const Context = createContext()
// This context contains two interesting components
const { Provider, Consumer } = Context
class App extends PureComponent {
constructor() {
super();
this.state = {
user: 'test1231'
}
}
render() {
return (
<Router>
<Provider value={{
state: this.state,
actions: {
increment: () => this.setState({ count: this.state.count + 1 }),
}
}}>
<Route path="/login" render={() => <Login Consumer={Consumer} />} />
<Route path="/register" component={Register} />
<Route path="/reset" component={ResetPass} />
<Route path="/lobby" component={Lobby} />
</Provider>
</Router>
);
}
}
export default App;
import React, { PureComponent } from 'react';
export default class Login extends PureComponent {
render() {
const Consumer = this.props.Consumer;
return (
<Consumer>
{({ state, actions }) => (
<div>
<div>{state.user}</div>
</div>
)}
</Consumer>
)
}
}
const Context = createContext()
const { Provider, Consumer } = Context
