React Routesでページ遷移しなかった話

始めに

現在Udemyの講座でReactを学習しているのですが、React Routerがv5からv6に変わった関係でRoutesの使い方がわからず...
ネットで調べてもよくわからず苦戦した話と、その内容を記載します！

今回の間違い

    <BrowserRouter>
      <div className="App">
        <p>
          HOMEは<Link to={`home`}>こちら</Link>
        </p>
        <Routes>
          <Route path={`home`} element={<Home />} />
          <Route path={`page1`} element={<Page1 />}>
            <Route path={`detail1`} element={<Page1DetailA />} />
            <Route path={`detail2`} element={<Page1DetailB />} />
          </Route>
          <Route path={`page2`} element={<Page2 />} />
        </Routes>
      </div>
    </BrowserRouter>

このコードを記述することによって、page1に記述されているdetail1・detail2のページリンクから、それぞれのページにリンクすると思っていました。
ですがurlは変わるけど、実際のページ遷移がしない...

正しいコード

    <BrowserRouter>
      <div className="App">
        <p>
          HOMEは<Link to={`home`}>こちら</Link>
        </p>
        <Routes>
          <Route path={`home`} element={<Home />} />
          <Route path={`page1`}>
            <Route index element={<Page1 />}/>
            <Route path={`detail1`} element={<Page1DetailA />} />
            <Route path={`detail2`} element={<Page1DetailB />} />
          </Route>
          <Route path={`page2`} element={<Page2 />} />
        </Routes>
      </div>
    </BrowserRouter>

修正箇所は以下の通りです！

          <Route path={`page1`} element={<Page1 />}>
            <Route path={`detail1`} element={<Page1DetailA />} />
            <Route path={`detail2`} element={<Page1DetailB />} />
          </Route>

          <Route path={`page1`}>
            <Route index element={<Page1 />}/>
            <Route path={`detail1`} element={<Page1DetailA />} />
            <Route path={`detail2`} element={<Page1DetailB />} />
          </Route>

終わりに

今回この箇所以外にも/を入れる箇所とそうでない箇所の違いもよくわかりませんでした...
またその解決方法についても別途記載したいと思います！
かなり基本的なことで躓きましたが、今後もまだまだつまずく予定なので、どんどん学習進めていきます！