How to navigate and switch components with BrowserRouter

Sunny — Wed, 30 Jun 2021 09:41:08 +0000

I want to switch between components after the user entered the requested info.

Components that will be shown to user by this order:

{MobileNum } Enter mobile number
{IdNumber } ID number
{CreatePassword } Create Password

When all these steps are completed the browser will switch to the home page.
The first time user must not be able to move between pages until he filled each request.

Without using *React Router* I used to switch only two components with a conditional rendering

Now I definitely want a better way with BrowserRouter as if I had 3-4 components inside Login.

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch,
} from 'react-router-dom';
import MobileNum from './MobileNum.jsx';
import IdentNumber from './IdNum.jsx';
import CreatePassword from './createPassword .jsx';

class Login extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Router>
          <Switch>
            <Route path='/'  component={MobileNum} />                                                
            <Route path='/'  component={IdNum} />
            <Route path='/'  component={CreatePassword } />
          </Switch>
        </Router>
      </div>
    );
  }
}

export default Login;

I searched the web in reactrouter.com and many others as here for a clean solution but found no answer.

Any Idea what's the best way to do it ?

Thanks

DEV Community: Sunny

How to navigate and switch components with BrowserRouter