title: How to pass the auth state to a nested component
body: <p>I'm new in react and redux and im trying to create a private nested route .On Login i get redirected to /userdashboard also the token gets back from the server and gets stored to the local storage.
  Whenever Im in <a href="http://localhost:3000/userdashboard/post" rel="nofollow noreferrer">http://localhost:3000/userdashboard/post</a> the user gets loaded the posts get loaded.
  But when i refresh the AUTH_ERROR action gets dispatched and the token gets removed from the local storage and i get redirected.</p>
  
  <p>I've tried to call the same action for loading the user on the nested component but still the AUTH_ERROR action was dispatched</p>
  
  <p>My  App.js</p>
  
  <pre><code>import React, { Fragment, useEffect } from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import Landing from './components/layout/Landing/Landing';
  import Register from './components/auth/Register';
  import Login from './components/auth/Login';
  import Alert from './components/layout/Alert/Alert';
  import UserDasboard from './components/userdashboard/UserDashboard';
  import PrivateRoute from './components/routing/PrivateRoute';
  
  //Redux
  import { Provider } from 'react-redux';
  import store from './store';
  import { loadUser } from './actions/auth';
  import setAuthToken from './utils/setAuthToken';
  
  import './App.scss';
  
  if (localStorage.token) {
    setAuthToken(localStorage.token);
  }
  
  const App = () =&gt; {
    useEffect(() =&gt; {
      store.dispatch(loadUser());
    }, []);
  
    return (
      &lt;Provider store={store}&gt;
        &lt;Router&gt;
          &lt;Fragment&gt;
            &lt;Alert /&gt;
            &lt;Switch&gt;
              &lt;PrivateRoute path='/userdashboard' component={UserDasboard} /&gt;
              &lt;Route exact path='/register' component={Register} /&gt;
              &lt;Route exact path='/login' component={Login} /&gt;
              &lt;Route exact path='/' component={Landing} /&gt;
            &lt;/Switch&gt;
          &lt;/Fragment&gt;
        &lt;/Router&gt;
      &lt;/Provider&gt;
    );
  };
  
  export default App;
  </code></pre>
  
  <p>//UserDashboard</p>
  
  <pre><code>import React, { Fragment, useEffect, useState } from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import PropTypes from 'prop-types';
  import Navbar from '../layout/Navbar/Navbar';
  import SideBar from '../layout/SideBar/SideBar';
  import Posts from '../../components/posts/Posts';
  
  const UserDashboard = props =&gt; {
    const [showSidebar, setShowSidebar] = useState(true);
  
    const toggleSideBar = () =&gt; setShowSidebar(!showSidebar);
  
    return (
      &lt;Router&gt;
        &lt;Fragment&gt;
          &lt;Navbar /&gt;
          &lt;div className='columns is-mobile'&gt;
            &lt;SideBar showSidebar={showSidebar} /&gt;
            &lt;div className='column'&gt;
              &lt;div className='columns is-mobile'&gt;
                &lt;div
                  className='column is-2-desktop is-2-mobile'
                  onClick={toggleSideBar}
                &gt;
                  &lt;button&gt;&lt;/button&gt;
                &lt;/div&gt;
                &lt;div className='column is-3-desktop is-3-mobile is-offset-4'&gt;
                  Dashboard
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;Switch&gt;
                &lt;Route path={props.match.url + '/post'} component={Posts} /&gt;
                &lt;Route
                  path={props.match.url + '/new-post'}
                  render={() =&gt; &lt;p&gt;Hello&lt;/p&gt;}
                /&gt;
              &lt;/Switch&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Fragment&gt;
      &lt;/Router&gt;
    );
  };
  
  UserDashboard.propTypes = {};
  
  export default UserDashboard;
  </code></pre>
  
  <p>//Post</p>
  
  <pre><code>import React, { Fragment, useEffect } from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import PostItem from './PostItem';
  import { getPosts } from '../../actions/post';
  
  const Posts = ({ getPosts, post: { posts, loading } }) =&gt; {
    useEffect(() =&gt; {
      getPosts();
    }, [getPosts]);
  
    return loading ? (
      &lt;p&gt;Loading&lt;/p&gt;
    ) : (
      &lt;Fragment&gt;
        &lt;section className='section'&gt;
          &lt;div className='columns'&gt;
            {/* Post form*/}
            &lt;div className='columns'&gt;
              {posts.map(post =&gt; (
                &lt;PostItem
                  key={post._id}
                  post={post}
                  subs={post.subscribedusers}
                /&gt;
              ))}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/Fragment&gt;
    );
  };
  
  Posts.propTypes = {
    getPosts: PropTypes.func.isRequired,
    post: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
    post: state.post
  });
  
  export default connect(
    mapStateToProps,
    { getPosts }
  )(Posts);
  </code></pre>
  
  <p>//PostItem</p>
  
  <pre><code>import React, { Fragment } from 'react';
  import PropTypes from 'prop-types';
  import { Link } from 'react-router-dom';
  import Moment from 'react-moment';
  import { connect } from 'react-redux';
  import { addSubscriber, removeSubscriber } from '../../actions/post';
  
  const PostItem = ({
    addSubscriber,
    removeSubscriber,
    auth,
    post: {
      _id,
      posttitle,
      posttext,
      postimage,
      user,
      subscribedusers,
      userposts,
      date
    },
    subs
  }) =&gt; {
    const sub = subs.map(sub =&gt; sub);
  
    return (
      &lt;div className='column'&gt;
        &lt;Link to={`/post/${_id}`}&gt;
          &lt;div class='card'&gt;
            &lt;div class='card-image'&gt;
              &lt;figure class='image is-4by3'&gt;
                &lt;img src={postimage} alt='Placeholder image' /&gt;
              &lt;/figure&gt;
            &lt;/div&gt;
            &lt;div class='card-content'&gt;
              &lt;div class='media'&gt;
                &lt;div class='media-left'&gt;
                  &lt;figure class='image is-48x48'&gt;
                    &lt;img
                      src='#'
                      alt='Placeholder image'
                    /&gt;
                  &lt;/figure&gt;
                &lt;/div&gt;
                &lt;div class='media-content'&gt;
                  &lt;p class='title is-4'&gt;{posttitle}&lt;/p&gt;
                  {/* &lt;p class='subtitle is-6'&gt;@johnsmith&lt;/p&gt; */}
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class='content'&gt;
                &lt;p&gt;{posttext}&lt;/p&gt;
                &lt;br /&gt;
                &lt;time datetime='2016-1-1'&gt;
                  &lt;Moment format='YYYY/MM/DD'&gt;{date}&lt;/Moment&gt;
                &lt;/time&gt;
              &lt;/div&gt;
  
              &lt;footer class='card-footer'&gt;
                &lt;p class='card-footer-item'&gt;
                  Subscriptions{' '}
                  {subscribedusers.length &gt; 0 &amp;&amp; (
                    &lt;span&gt;{subscribedusers.length}&lt;/span&gt;
                  )}
                &lt;/p&gt;
                &lt;p class='card-footer-item'&gt;{userposts.length}&lt;/p&gt;
  
                &lt;button className='button' onClick={e =&gt; addSubscriber(_id)}&gt;
                  Subscribe
                &lt;/button&gt;
                &lt;button className='button' onClick={e =&gt; removeSubscriber(_id)}&gt;
                  UnSubscribe
                &lt;/button&gt;
              &lt;/footer&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    );
  };
  
  PostItem.propTypes = {
    post: PropTypes.object.isRequired,
    auth: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
    auth: state.auth
  });
  
  export default connect(
    mapStateToProps,
    { addSubscriber, removeSubscriber }
  )(PostItem);
  </code></pre>
  
  <p>//loadUser in ./actions/auth</p>
  
  <pre><code>export const loadUser = () =&gt; async dispatch =&gt; {
    if (localStorage.token) {
      setAuthToken(localStorage.token);
    }
  
    try {
      const res = await axios.get('userapi/auth');
  
      dispatch({
        type: USER_LOADED,
        payload: res.data
      });
    } catch (err) {
      dispatch({
        type: AUTH_ERROR
      });
    }
  };
  </code></pre>
  
  <p>//setAuthToken</p>
  
  <pre><code>import axios from 'axios';
  
  const setAuthToken = token =&gt; {
    if (token) {
      axios.defaults.headers.common['x-auth-token'] = token;
    } else {
      delete axios.defaults.headers.common['x-auth-token'];
    }
  };
  
  export default setAuthToken;
  </code></pre>