Как я могу вложить компоненты маршрутизации динамических страниц в React Routers?

Я работаю над динамической веб-страницей, используя React. Я использую компонент Switch из React Routers, чтобы переходить с домашней страницы на другие страницы по мере необходимости. Я хочу, чтобы следующая маршрутизация создала новую учетную запись:

Домашняя страница >> страница входа >> Создать учетную запись (1) > (2) > (3) >> вернуться на страницу входа или на главную страницу Другими словами: пользователь должен иметь возможность перейти с домашней страницы на страницу входа, со страницы входа на страницу создания учетной записи с тремя шагами (каждый из которых является уникальным компонентом) и с третьего шага вернуться на домашнюю страницу.

Моя проблема заключается в том, чтобы вернуться с третьей страницы создания учетной записи на домашнюю страницу или страницу входа. Я могу создавать ссылки, которые возвращают меня со страницы 1 > 2, 2 > 1, 2 > 3 или 3 > 2. Но я не могу сделать так, чтобы на третьей странице отображалась ссылка, которая вернет меня на главную.

Первоначально у меня был оператор switch на моей странице создания учетной записи, отображающий три отдельных компонента. Если я установлю маршрут домой внутри этого оператора switch, div отобразит Home внутри него, как и ожидалось. Если бы я просто пропустил маршрут, страница не отобразилась бы, когда я нажму на ссылку, но явно имела бы правильный путь, потому что она правильно загружалась бы при обновлении. Я также пробовал: Перемещение маршрутизатора для охвата всего компонента, а не только компонента коммутатора. Перемещение маршрута домой перед чем-либо еще в документе - как и ожидалось, это просто отображало домашнюю страницу над страницей создания учетной записи при активации маршрута. Использование перенаправления внутри и вне оператора Switch. Действительно неприятный метод рендеринга внутри div значения «компонентного» ключа изнутри объекта и ручного обновления значений в этом объекте при нажатии на ссылки вместо использования чего-либо, даже смутно связанного с React Routers. Это сработало лучше, чем должно было, но не идеально.

** В качестве примечания мне сказали (хотя у меня нет личного опыта), что Vue имеет «степпер», который можно использовать для навигации по страницам 1, 2 и 3, чтобы избежать использования вложенного маршрутизатора в все. Есть ли такая вещь в React или React-Routers?

Приложение:

function App() {
  return (

    <Router>
      <Switch>
        <Route exact path = "/" component = {Home} />
        <Route path = "/Login" component = {Login} />
        <Route path = "/CreateAccount" component = {CreateAccount} />
        <Route path = "/Account_Recovery" component = {Recovery} />
        <Route path = "/RR_One" component = {RR_One} />
      </Switch>
    </Router>

  );
}

Страница создания учетной записи, как она существует сейчас:

class CreateAccount extends React.Component {
  render() {
    return (

    <Router>
      <PageHeader pageTitle = "Create a Free Account"/>

      <div className = "pageBody">
        <div className = "centerHalf">

            <Route path = "/CreateAccount/1" component = {PageOne} />
            <Route path = "/CreateAccount/2" component = {PageTwo} />
            <Route path = "/CreateAccount/3" component = {PageThree} />

        </div>
        <p>Paragraph outside of the changing div.</p>
      </div>

    </Router>
)}};

Пример компонента PageThree (остальные пока похожи, просто связаны друг с другом):

class PageThree extends React.Component {
  render() {
    return (
      <div>
        <p>Page Three</p>
        <Link to = {{pathname: "/CreateAccount/2"}}>Go to page 2</Link> <br />
        <Link to = {{pathname: "/Login"}}>Complete</Link>
      </div>
)}};