質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

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

yuki96
yuki96

総合スコア26

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0リアクション

0クリップ

162閲覧

投稿2022/09/18 02:16

編集2022/09/18 03:22

使用している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でも同様に何も描画されないので
ビル後のパスが異なるという要因は該当しなさそうです

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

sk-sora--ypi

2022/09/18 02:26

> return文の中身をhタグのみに変えたところ問題なく表示された 変更前はどのように記載していたのですか? hタグのみで正常に反映されるのであればそのコンポーネントに問題があるだけで、 routerの書き方に問題がある可能性は低いです
yuki96

2022/09/18 03:23

ご確認ありがとうございます! 変更前の内容を追記しました。正確には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

2022/09/18 03:47

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

2022/09/18 04:54

ややこしくてすみません 何も表示されなかったときのコードは 「該当のソースコード」に記載しています。
sk-sora--ypi

2022/09/18 05:26

なるほど。。。。であれば分かりませんね。 面倒だったので一つのファイルにまとまっていますが、 少なくとも私の環境では下記で動作するので、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

2022/09/18 05:52

ご回答ありがとうございます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

2022/09/18 10:01

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

2022/09/23 03:35

すみません、回答いただいていたのに気づきませんでした! jsxに変更してみても動作は変わりませんでした。。。 ただ、環境構築を0からやり直したら動くようになりました🙇‍♀️ どうやらバージョンの依存関係が絡んでいたようです お騒がせしました。。。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。