react-router-domv6のルーティング記法について

Question

使用しているOS・バージョンは以下です

OS:mac

├── react-dom@17.0.2
├── react-router-dom@6.4.0
└── react@17.0.2

■質問内容
Reactで簡単なページ遷移を実装しようとしたところ、ローカル環境のブラウザ上に何も描画されなくなりました
return文の中身を以下のようにhタグとコンポーネントのみに変えたところ問題なく表示されたので
ルーティングの記述に問題があると思われます

import React from "react";
import Home from "./components/Home.jsx";
import Details from "./components/Details.jsx";

const App = () => {
  return (
    <>
      <h1>test</h1>
      <Home />
      <Details />
    </>
  );
}
export default App;

結果

どこが間違っているのかご指摘いただけないでしょうか。

実現したいこと

ルーティングの設定を正常に行いたい

発生している問題・エラーメッセージ

ルーティングの記述後、ローカル環境のブラウザ上に何も描画されない
エラーメッセージはありません

該当のソースコード

App.js

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import  Home from "./components/Home.jsx";
import Details from "./components/Details.jsx";

export const App = () => {
  return (
    <BrowserRouter>
    <Routes>
      <Route path={`/`} element={<Home />} />
      <Route path={`/details/`} element={<Details />} />     
    </Routes>
    </BrowserRouter>
  );
};

Home.jsx

import React from "react";

function Home(){
  return  <h1>Home</h1>;
};

export default Home;

Deails.jsx

import React from "react";

function Details() {
  return <h1>Details</h1>;
}

export default Details;

試したこと

react router dom v6の参考記事を参照

▼以下の記事の内容をそれぞれ実行しています
https://zenn.dev/longbridge/articles/65355d3fdb7939
https://www.webopixel.net/javascript/1773.html
https://reffect.co.jp/react/react-router-6

補足情報（FW/ツールのバージョンなど）

使用しているOS・バージョンは以下です
OS:mac

├── react-dom@17.0.2
├── react-router-dom@6.4.0
└── react@17.0.2

また、npm run build, npm startでも同様に何も描画されないので
ビル後のパスが異なるという要因は該当しなさそうです

Comments

[sk-sora--ypi]

> return文の中身をhタグのみに変えたところ問題なく表示された

変更前はどのように記載していたのですか？
hタグのみで正常に反映されるのであればそのコンポーネントに問題があるだけで、
routerの書き方に問題がある可能性は低いです

[yuki96]

ご確認ありがとうございます！
変更前の内容を追記しました。正確にはhタグのみではなく、コンポーネントも含まれていました
失礼いたしました。。

import React from "react";
import Home from "./components/Home.jsx";
import Details from "./components/Details.jsx";

const App = () => {
return (
<>
<h1>test</h1>
<Home />
<Details />
</>
);
}
export default App;

[sk-sora--ypi]

何も表示されなかった時のコードを質問のところに記載してください。
動いたコードでは原因は何も分かりません。

[yuki96]

ややこしくてすみません

何も表示されなかったときのコードは
「該当のソースコード」に記載しています。

[sk-sora--ypi]

なるほど。。。。であれば分かりませんね。
面倒だったので一つのファイルにまとまっていますが、
少なくとも私の環境では下記で動作するので、routerに問題はないかと。
```
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

const Home = () => <><h1>Home</h1><Link to={"/details"}>to details</Link></>;
const Details = () => <><h1>Details</h1><Link to="/">to home</Link></>;

function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/details" element={<Details />} />
</Routes>
</BrowserRouter>
);
}

export default App;
```

2つ気になるんですが、
一つ目。teratailに書き込まれる際に、ファイル名がDeails.jsxとなっていますが、
ファイル名はDetails.jsxであっているか。

二つ目
App.jsxにてexport const Appと記載していますよね。
動いた方のソースコードはexport default App;でdefaultでAppをExportしていますが、
mainの方もdefaultじゃないimport方法で行えていますか？

[yuki96]

ご回答ありがとうございますm(_ _)m

1つ目
私のタイプミスです。ファイル名はDetails.jsxでした。

2つ目
こちら恐れ入りますが以下でご確認内容は合っておりますでしょうか？
-------------------------------------------------------------------------------------------
「該当のソースコード」に記載のAppをexport先のファイルで
　{中括弧}をつけてimportできているのか
--------------------------------------------------------------------------------------------

なお、export先（今回はindex.js）のコードは以下の通りです

import { StrictMode } from "react";
import ReactDom from "react-dom";

import { App } from "./App.js";

ReactDom.render(
<StrictMode>
<App />
</StrictMode>,
document.getElementById("root")
);

ご確認内容の認識があっておりましたら、おそらくimport方法はあっているかなと思います

[sk-sora--ypi]

認識は大丈夫で、import方法も大丈夫です！
ちょっと気づいたこととしては、jsxではなくjsでやっていることです
App.js及びindex.jsをjsxに変更してみても動作って変わりませんかね？

[yuki96]

すみません、回答いただいていたのに気づきませんでした！
jsxに変更してみても動作は変わりませんでした。。。

ただ、環境構築を０からやり直したら動くようになりました🙇‍♀️
どうやらバージョンの依存関係が絡んでいたようです

お騒がせしました。。。

Answer 1

上記、パッケージをインストールするディレクトリに誤りがあり、
前提のバージョンとは異なる環境を構築していました。。

再度一から環境構築を行うことで解消できました