Skip to content

Instantly share code, notes, and snippets.

@vikbert
Forked from abohannon/PrivateRoute.js
Created June 20, 2019 04:02
Show Gist options
  • Save vikbert/58ee8826d61a300144dd87b4772709b5 to your computer and use it in GitHub Desktop.
Save vikbert/58ee8826d61a300144dd87b4772709b5 to your computer and use it in GitHub Desktop.
React/Redux Auth with Private Route Component
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component: Component, authed, ...rest }) => (
<Route
{...rest}
render={props => (
authed
? <Component {...props} />
: <Redirect to="/login" />
)}
/>
);
export default PrivateRoute;
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';
import * as actions from '../actions';
import Dashboard from '../components/Dashboard';
import UserAuth from '../components/UserAuth';
import PrivateRoute from '../components/PrivateRoute';
class Routes extends Component {
componentDidMount() {
console.log('==== Routes mounted!');
}
render() {
console.log('Routes props', this.props.currentUser);
return (
<BrowserRouter>
<div>
<Route exact path="/login" component={UserAuth} />
<Route exact path="/signup" component={UserAuth} />
<PrivateRoute exact path="/" component={Dashboard} authed={this.props.currentUser} />
</div>
</BrowserRouter>
);
}
}
const mapStateToProps = state => ({ currentUser: state.userAuth });
export default connect(mapStateToProps, actions)(Routes);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment