react-router - React-router-dom: 非常に単純なネストされたルーティングが機能しない

Question

さまざまなチュートリアルと複数の stackOverflow の質問を検索しました。そしてどれも、非常に基本的な問題を解決するのに役立ちませんでした:
react-router-dom でネストされたルートを実装
する これまでの私のコードは次のとおりです:

App.js

  <Route exact path="/home" name="Home" component={DefaultLayout} />

DefaultLayout.js

 <Route path="/home/users" component={Users} />

/home/usersに移動すると、react-router-dom がDefaultLayout.js内で検索するので はなく、App.js内でそのルートの定義を検索しているため、空白の画面が表示されます。1:私は正確に何を間違っていますか? 質問 2: react-router-dom は、 App.js内ではなく、DefaultLayout.js内でネストされたルートを探す必要があることをどのように認識していますか?

2 日経ちましたが、まだこの単純な問題を解決できません。
どんな助けでも大歓迎です。
編集 1:非常に単純なネストされたルーティングを実装するためだけに、新しいプロジェクトを開始しました。

App.js

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import ParentComponent from "./nestedComponents/ParentComponent";

function App() {
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path="/home" name="Home" component={ParentComponent} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

ParentComponent.js

import React from "react";
import nestedComponentOne from "./nestedComponentOne";
import nestedComponentTwo from "./nestedComponentTwo";
import { Switch, Route } from "react-router-dom";

export default function ParentComponent() {
  return (
    <div>
      PARENT COMPONENT
      <Switch>
        <Route path="home/nestedComponentOne" component={nestedComponentOne} />
        <Route path="home/nestedComponentTwo" component={nestedComponentTwo} />
      </Switch>
    </div>
  );
}

ネストされたComponentOne.js

import React from "react";

export default function nestedComponentOne() {
  return <div>NESTED COMPONENT 1</div>;
}

nestedComponentTwo.js

import React from "react";

export default function nestedComponentTwo() {
  return <div>NESTED COMPONENT 2</div>;
}

しかし、ネストされたコンポーネントにアクセスしようとすると、空白の画面が表示されます...