BrowserRouter를 사용하여 구성 요소 탐색 및 전환 방법

사용자가 요청한 정보를 입력한 후 구성 요소 사이를 전환하고 싶습니다.
이 순서로 사용자에게 표시되는 구성 요소:

{모바일Num}핸드폰 번호 입력

{IdNumber}IdNumber

{CreatePassword}비밀번호 만들기

이러한 모든 단계를 완료하면 브라우저가 홈 페이지로 전환됩니다.
첫 번째 사용자는 모든 요청을 작성하기 전에 페이지 사이를 이동할 수 없습니다.
사용하지 않는 경우*React Router* 조건 렌더링으로만 두 구성 요소 전환
지금 나는 분명히 더 좋은 방식으로 사용하고 싶다. BrowserRouter 마치 내가 3-4개의 구성 요소가 안에 있는 것처럼 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;

나는 인터넷에서 검색해 보았다.com과 많은 다른 회사들이 이곳에서 깨끗한 해결 방안을 찾았지만 답을 찾지 못했다.
가장 좋은 방법이 뭔지 아세요?
고마워요 고마워요