Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save chrisjlee/5dae6dbf592a03309b0e0e8042a20c00 to your computer and use it in GitHub Desktop.
Save chrisjlee/5dae6dbf592a03309b0e0e8042a20c00 to your computer and use it in GitHub Desktop.
let UserContext = React.createContext();
class App extends React.Component {
state = {
user: null,
setUser: user => {
this.setState({ user });
}
};
render() {
return (
<UserContext.Provider value={this.state}>
<Router>
<Home path="/" />
<About path="/about" />
<PrivateRoute as={Dashboard} path="/dashboard" />
</Router>
</UserContext.Provider>
);
}
}
class PrivateRoute extends React.Component {
static contextType = UserContext;
render() {
let { as: Comp, ...props } = this.props;
return this.context.user ? <Comp {...props} /> : <Login />;
}
}
class Login extends React.Component {
static contextType = UserContext;
render() {
return (
<form
onSubmit={async () => {
let user = await doWhateverYouNeedToDoToLogin();
this.context.setUser(user);
}}
/>
);
}
}
function Home() {
return <div>home</div>;
}
function About() {
return <div>about</div>;
}
function Dashboard() {
return <div>Protected dashboard</div>;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment