title: React Router: How to keep logged in data (props) when re-routing
body: <p>I'm creating a React Router app and I'm learning authentication. Here are some parts:</p>
  
  <p>Login component (login.jsx) </p>
  
  <ul>
  <li>authenticates user's credential on the back end </li>
  <li>sets the authentication token in local storage</li>
  <li>return's the user's data</li>
  <li>sets state with the data</li>
  <li>passes state to Admin component</li>
  </ul>
  
  <p>Admin component (admin.jsx)</p>
  
  <ul>
  <li>protected by a private route (see privateroute.jsx)</li>
  <li>basically a container component </li>
  <li>passes user's data to and renders other components that display/edit the data</li>
  </ul>
  
  <p>Authentication Button on the nav bar (authbutton.jsx)</p>
  
  <ul>
  <li>checks if user is logged in and renders "login" or "logout" button</li>
  <li>if logged in, also renders "my posts" button that routes to Admin</li>
  </ul>
  
  <p>All works well from Login to Admin. My problem is that when I click away from the Admin page (like the home page) and then click on "my posts" button, it reroutes to Admin and knows I'm logged in, but the user's data is no longer available. Before, coming from the login component, the user's data was in <code>this.props.location.state.me</code>.</p>
  
  <p>I'm stuck because I'm trying to route to Admin from two different components and I've never done that before. Furthermore, I feel like there's a solution in the authentication setup that I'm missing.</p>
  
  <p>Other ideas:</p>
  
  <p>Should I conditionally set state in Admin when the user's data is passed?</p>
  
  <p>Should I store the data in local storage in the browser like I'm doing with the authentication token? </p>
  
  <p>I tried fetching data, setting state in Admin with <code>componentDidMount</code> but it didn't re-render so I read to use <code>componentWillReceiveProps</code> but that's being deprecated and replaced with <code>getDerivedStateFromProps</code>. Could not figure that out.</p>
  
  <p>login.jsx</p>
  
  <pre><code>import React, { Component, Fragment } from 'react';
  import * as userService from '../../services/user';
  import { Redirect } from 'react-router-dom';
  import IndeterminateProgress from '../utilities/indeterminateprogress';
  import Nav from '../home/nav';
  
  class Login extends Component {
      constructor(props) {
          super(props);
          this.state = {
              redirectToReferrer: false,
              email: '',
              password: '',
              feedbackMessage: '',
              checkingLogin: true,
              me: ''
          };
      }
  
      componentDidMount() {
          userService.checkLogin()
              .then((loggedIn) =&gt; {
                  if (loggedIn) {
                      this.setState({ redirectToReferrer: true, checkingLogin: false });
                  } else {
                      this.setState({ checkingLogin: false });
                  }
              });
      }
  
      login(e) {
          e.preventDefault();
          userService.login(this.state.email, this.state.password)
              .then((meData) =&gt; {
                  this.setState({ redirectToReferrer: true, me: meData })
              })  
              .catch((err) =&gt; {
                  if (err.message) {
                      this.setState({ feedbackMessage: err.message });
                  }
              });
      }
  
      handleEmailChange(value) {
          this.setState({ email: value });
      }
  
      handlePasswordChange(value) {
          this.setState({ password: value });
      }
  
      render() {
          const { from } = this.props.location.state || { from: { pathname: '/admin', state: { ...this.state } } };
          const { redirectToReferrer, checkingLogin } = this.state;
  
          if (checkingLogin) {
              return &lt;IndeterminateProgress message="Checking Login Status..." /&gt;;
          }
          if (redirectToReferrer) {
              return (
                  &lt;Redirect to={from} /&gt;
              );
          }
  
          return (
              &lt;Fragment&gt;
                  &lt;Nav /&gt;
                  &lt;h2 className="heading center"&gt;Login to continue&lt;/h2&gt;
                  &lt;form className="center" onSubmit={(e) =&gt; this.login(e)}&gt;
                      &lt;div className="form-group"&gt;
                          &lt;input
                              placeholder="Email"
                              id="email"
                              className="col-3"
                              type="email"
                              onChange={(e) =&gt; this.handleEmailChange(e.target.value)}
                              required
                          /&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                          &lt;input
                              placeholder="Password"
                              id="password"
                              className="col-3"
                              type="password"
                              onChange={(e) =&gt; this.handlePasswordChange(e.target.value)}
                              required
                          /&gt;
                      &lt;/div&gt;
                      {this.state.feedbackMessage ? (
                          &lt;p&gt;{this.state.feedbackMessage}&lt;/p&gt;
                      ) : null}
                      &lt;input type="submit" value="Login" className="btn btn-info btn-sm" /&gt;
                  &lt;/form&gt;
              &lt;/Fragment&gt;
          );
      }
  }
  
  export { Login };
  </code></pre>
  
  <p>admin.jsx</p>
  
  <pre><code>import React, { Component } from 'react';
  import Nav from '../home/nav';
  import AdminBlogContainer from './adminblogcontainer'
  import { BrowserRouter as Router, Link } from 'react-router-dom';
  
  const Admin = (props) =&gt; {
      return (
          &lt;div className="flexcol center"&gt;
              &lt;Nav /&gt;
              &lt;h1 className="heading"&gt;Your Blog Posts&lt;/h1&gt;
              &lt;AdminBlogContainer {...props.location.state.me} /&gt;
              &lt;Link to={{
                  pathname: '/write',
                  state: { ...props.location.state.me }
              }}
                  className="btn btn-outline-secondary mt-4"
              &gt;Create a New Blog Post&lt;/Link&gt;
          &lt;/div&gt;
      )
  }
  
  export { Admin };
  </code></pre>
  
  <p>privateroute.jsx</p>
  
  <pre><code>import React from 'react';
  import { Route, Redirect } from 'react-router-dom';
  import { isLoggedIn } from '../../services/user';
  
  const PrivateRoute = (props) =&gt; {
      const Component = props.component;
      const propsToPass = Object.assign({}, props);
      delete propsToPass.component;
  
      return (
          &lt;Route {...propsToPass} render={props =&gt; (
              isLoggedIn() ? (
                  &lt;Component {...props} /&gt;
              ) : (
                  &lt;Redirect to={{
                      pathname: '/login',
                      state: { from: props.location }
                  }} /&gt;
              )
          )} /&gt;
      );
  };
  
  export { PrivateRoute }
  </code></pre>
  
  <p>authbutton.jsx</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  import { isLoggedIn } from '../../services/user';
  
  const AuthButton = (props) =&gt; {
      if (isLoggedIn()) {
          return (
              &lt;div&gt;
                  &lt;Link className="btn btn-info m-1" to="/logout"&gt;Logout&lt;/Link&gt;
                  &lt;Link className='btn btn-info m-1' to={{
                      pathname: '/admin',
                      // state: { ...this.state }
                  }}
                      &gt;My Posts&lt;/Link&gt;
              &lt;/div&gt;
          );
      } else {
          return (
              &lt;div&gt;
                  &lt;Link className="btn btn-info m-1" to="/login"&gt;Login&lt;/Link&gt;
                  &lt;Link className="btn btn-info m-1" to="/register"&gt;Register&lt;/Link&gt;
              &lt;/div&gt;
          )
      }
  };
  
  export { AuthButton };
  </code></pre>