Skip to content

Instantly share code, notes, and snippets.

@abohannon
Created December 22, 2017 19:23
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save abohannon/cca2dd998edf9dc2c2165f538eece4b2 to your computer and use it in GitHub Desktop.
Save abohannon/cca2dd998edf9dc2c2165f538eece4b2 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);
@Zo3rb
Copy link

Zo3rb commented Oct 27, 2020

Stll can use this ?
I need to make route guard in my app too ?


Edit: i did try out and it was awesome :) :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment