title: Route handling a uniquely generated URL specific to a user in ReactJS and react-router-dom v4
body: <p>In the app I am working on if a user forgot their password, they click on a link that brings them to a page where they enter the username. If the username is matched, it sends a uniquely generated URL to the email associated with the username. For example:</p>
  
  <pre><code>http://localhost:8000/auth/security_questions/0e51706361e7a74a550e995b415409fdab4c66f0d201c25cb4fa578959d11ffa
  </code></pre>
  
  <p>All of this works fine, but I am trying to figure out how to handle this on the front-end routing using <code>React</code> and <code>react-router-dom v4</code>. I made this route.</p>
  
  <pre><code>&lt;Route exact path='/auth/security_questions/:key' component={SecurityQuestions} /&gt;
  </code></pre>
  
  <p>The correct component loads related to security questions, but that is not the behavior I am after. After all, it takes anything you put after <code>security_questions/</code>.</p>
  
  <p>What it should be doing is matching <code>:key</code> against the database before it loads the component.</p>
  
  <p>I'm not sure about a few things:</p>
  
  <p>1) How to parse out the <code>:key</code> portion so that I can pass it as a value to verify against the database.</p>
  
  <p>2) While I have a general idea of how to handle the verification, I am not sure how to tell <code>React</code>: "Ok, the key has been verified in the database. Finish loading the component."</p>
  
  <p>I think it would in general look like:</p>
  
  <pre><code>// ./containers/security_questions.js
  
  componentWillMount() {
      this.props.verifyKey(:key);
  }
  </code></pre>
  
  <p>And then actions:</p>
  
  <pre><code>// ./actions/authentication.index.js
  
  export function verifyKey({ :key }) {
      return function(dispatch) {
          axios
              .post(
                  `${ROOT_URL}/api/auth/security_questions/`, 
                  { :key }
              )
              .then(response =&gt; {
  
                  dispatch('Finish loading the rest of the component')
              })
              .catch(error =&gt; {
                  dispatch(authError(error.response.data.non_field_errors[0]));
              });
      }
  }
  </code></pre>
  
  <p>Or maybe instead of it finishing loading the component, it should just route to a different URL that is a protected route.</p>