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

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

新規登録して質問してみよう
ただいま回答率
85.44%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

613閲覧

reactのrouteを用いてページを作成したいが,何も表示されない

narimi

総合スコア18

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2023/03/04 11:11

実現したいこと

react初心者です.
webページ作成の際にreactを用いており,簡単なページ作成後にページ遷移を可能にするため調べながらいろいろ試しましたが,うまくいきません.

前提

具体的には,App.jsのアロー関数App内に記述したreturnでしかページに表示する要素を扱えず,
その他のURLの要素(Routes内に記述した要素)が一切反映されない,といった形になります.

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

ログにエラーは出ていませんが,そもそも実行すらされていないように思います.

該当のソースコード

Javascript

1import React, { Component } from "react"; 2import { BrowserRouter, Link, Route, Routes } from "react-router-dom"; 3import "./App.css"; 4 5const App = () => { 6 <BrowserRouter> 7 <Routes> 8 <div class="container text-center mt-5"> 9 <Route path={`/`} element={<Home />} /> 10 <Route path={`/about/`} element={<About />} /> 11 </div> 12 </Routes> 13 </BrowserRouter> 14} 15 16const Home = () => { 17 return ( 18 <div> 19 <h1>Welcome</h1> 20 </div> 21 ) 22} 23 24const About = () => { 25 return( 26 <div> 27 <h1>about</h1> 28 </div> 29 ) 30} 31 32export default App; 33

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

react-router-domのバージョンは6です.
その他,必要な情報とありましたら,コメントにて質問していただけると幸いです

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

■原因
「URLの要素(Routes内に記述した要素)が一切反映されない」とのことですが、AppコンポーネントがJSXを返す箇所で、return文がないことが原因かと思います。

■対応
下記のようにAppコンポーネント内を書き換えてみてください

js

1const App = () => { 2 return ( 3 <BrowserRouter> 4 <Routes> 5 <div className="container text-center mt-5"> 6 <Route path={`/`} element={<Home />} /> 7 <Route path={`/about/`} element={<About />} /> 8 </div> 9 </Routes> 10 </BrowserRouter> 11 ); 12};

■補足
Reactの構文上class属性についてはclassNameと記載するようになっていますのでこちらも変更が必要かと思います

投稿2023/03/04 11:50

pikimaru

総合スコア78

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

narimi

2023/03/04 13:17

まとまったとてもわかりやすい説明本当にありがとうございます! Appコンポーネントをいただいたコードに置き換えてみたところ,そのままではエラーが出てしまい使えなかったのですが,エラーコードにRoutesはそれより下にdivを持てないといった旨の内容だったので,divを削除したところ問題なく機能しました. また,質問とは関係ない内容になるかもしれませんが,色々調べていると,現在使用しているreact18になったタイミングでreactDOMのサポートは終了しているとの記事が出てきました. 問題なく機能はしているためこのままでも勧められそうではありますが,何か問題となる可能性はありますでしょうか? わかる範囲で教えていただけると幸いです.
pikimaru

2023/03/04 13:59

レンダリングの関数が変わったみたいですね。 React18からはReactDOM.render()の代わりに"createRoot()"を使用する感じだと思います。 載せていただいているソースでは問題ないかと思います。 わかりやすい参考サイトがありましたので下記に記載いたします。 https://zenn.dev/nawomat/articles/f8be31b66bfc19
narimi

2023/03/04 15:38

なるほど,, 今のところはrenderはどこにも用いていないので,このまま進めていけそうです. ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問