title: ReactJS -How to create multistep component/form with single path using React Router
body: <p>I want to switch between components after the user entered the requested info.
  <br> Components that will be shown to user by this order:</p>
  <ol>
  <li>{MobileNum } Enter mobile number</li>
  <li>{IdNumber } ID number</li>
  <li>{CreatePassword } Create Password</li>
  </ol>
  <p>When all these steps are completed the browser will switch to the home page.
  The user must <strong>not be able</strong> to move between pages until he filled each request in each component.</p>
  <p>Now I want a better way with <strong>router</strong> as if I had 3-4 components inside <code>Login</code>, and must be in a secured whey, also the user must not be able to switch components manually through the URL.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import {
    BrowserRouter as Router,
    Redirect,
    Route,
    Switch,
  } from 'react-router-dom';
  import MobileNum from './MobileNum.jsx';
  import IdNumber from './IdNum.jsx';
  import CreatePassword from './createPassword .jsx';
  
  class SignUp extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Router&gt;
            &lt;Switch&gt;
                  //// Here needs to know how to navigate to each component on its turn
              &lt;Route path='/'  component={MobileNum} /&gt;                                                
              &lt;Route path='/'  component={IdNumber} /&gt;
              &lt;Route path='/'  component={CreatePassword } /&gt;
            &lt;/Switch&gt;
          &lt;/Router&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default SignUp ;
  </code></pre>
  
  <p>I searched the web in <em>reactrouter.com</em> and many others as here for a clean solution but found no answer.
  <br> <strong>Any Idea what's the best way to do it ?</strong>
  <br><br>
  <strong>Thanks</strong></p>