ActuallyMainApp.jsx

+ import LoginRequiredRoute from './LoginRequiredRoute';


<Switch>
  <Route path="/login/" component={Login} />
  + <LoginRequiredRoute component={App} />
  - <Route component={App} />
</Switch>

App.js

// changes only
import { changeLoggedIn } from './actions';

const App = (props) => {
  return (
    <div>
      <Nav />
      <button onClick={() => { props.changeLoggedIn(false) }}>Logout</button>
      <Switch>
        <Route exact path="/friends/" component={Friends} />
        <Route exact path="/books/" component={Books} />
        <Redirect exact from="/" to="/friends/" />
      </Switch>
    </div>
  )
}


export default connect(
  state => ({
    loggedIn: state.loggedIn,
  }),
  {
    changeLoggedIn
  }
)(App);

Login.jsx

import React from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';

import { changeLoggedIn } from './actions';


const Login = (props) => {
  if (props.loggedIn) {
    const { from } = props.location.state || { from: { pathname: '/' } }
    return <Redirect to={from} />
  }
  return (
    <div>
      <h1>Login</h1>
      <button onClick={() => { props.changeLoggedIn(true) }}>Login</button>
    </div>
  )
}


export default connect(
  state => ({
    loggedIn: state.loggedIn
  }),
  {
    changeLoggedIn,
  }
)(Login);

LoginRequiredRoute.jsx

import React from 'react';
import { connect } from 'react-redux';
import { Redirect, Route } from 'react-router-dom';


const LoginRequiredRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    rest.loggedIn ? (
      <Component {...props} />
    ) : (
      <Redirect to={{
        pathname: '/login/',
        state: { from: props.location }
      }} />
    )
  )} />
)

export default connect(
  state => ({
    loggedIn: state.loggedIn,
  })
)(LoginRequiredRoute);