React/Redux Auth with Private Route Component

PrivateRoute.js

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;

Routes.js

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);

good!

@alfonmga I agree with you. In my own project, I direct read current user from store's redux state.

tks !

Hey Adam (@abohannon) thanks for sharing this.
I was asking myself if isn't better to get currentUser state from PrivateRoute.js instead of get it from Routes.js so we don't have to pass it to all private routes. What do you think? I'm missing something? I'm new to Redux.

@alfonmga Whoa I had no idea people were finding this. Two years later, sorry!

So it's been a minute since I've used this pattern in redux and today I would likely use hooks or context, but glancing back over this, I think I added connect on Routes because I was treating Routes as a container and I typically only like to connect my containers to keep things organized. Sometimes I break that rule, but since currentUser here only has to go one level deep, I don't mind.

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

---

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