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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

React.js

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

Q&A

0回答

1205閲覧

React does not recognize the `computedMatch`...というエラーが発生する

gozikyu

総合スコア4

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2021/04/02 12:06

編集2022/01/12 10:55

以下の内容で開発をしており、EC2上にデプロイをしたのですが、ブラウザでreactを起動すると、コンソールに以下のようなエラーが表示され、レンダーが起こりません。

エラー文
Warning: React does not recognize the computedMatch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase computedmatch instead. If you accidentally passed it from a parent component, remove it from the DOM element.

アプリの構成
・フロントエンド:react
・API:rails apiモード
docker-compose を用いてフロントエンド、API用のコンテナをそれぞれ起動させています。

computedMatchというpropを認識できないということだと思うのですが、computedMatchという単語はファイルのコード上にはありません。
Reactの内部で使用しているものと考えているのですが、どのように対処すればよいかわからず困っております。

ご知見ある方いらっしゃいましたらアドバイスいただけると幸いです。

よろしくお願いいたします。

【追記】
Switchの使い方に問題があるとコメント頂いたので、Switchを使っているRouting.jsxを以下に記載します。
Switchのつかいかたのどこに問題があるのか、まだ理解しきれていないので、現在Switch関連を重点的に調査しております。

コードを見て、アドバイスがありましたら、ご指摘いただけると幸いです。

Routing.jsx

import React, { useEffect, useState } from "react"; import { BrowserRouter as Router, Route, Switch, useHistory, Redirect, } from "react-router-dom"; import axios from "axios"; import TopPage from "./Components/Page/TopPage"; import TrainingPage from "./Components/Page/TrainingPage"; import UserMyPage from "./Components/Page/UserMyPage"; import UserList from "./Components/UserList"; import UserProfile from "./Components/UserProfile"; import UserEdit from "./Components/Page/UserEdit"; import SignUp from "./Components/Page/SignUp"; import SignIn from "./Components/Page/SignIn"; import SearchResultPage from "./Components/Page/SearchResultPage"; import Auth from "./Auth"; import GymsAndMap from "./Components/GymsAndMap"; import GymRegistraion from "./Components/Component/GymRegistration"; import Header from "./Components/Header"; import NotFound from "./Components/Page/NotFound"; const Routing = () => { const [loggedInStatus, setLoggedInStatus] = useState(false); const [loginUser, setLoginUser] = useState(""); const [isloaded, setIsLoaded] = useState(true); const history = useHistory(); const login = () => { setLoggedInStatus(true); }; const logout = () => { setLoggedInStatus(false); }; console.log(loggedInStatus); const checkLoginStatus = () => { axios .get("http://localhost:3001/login", { withCredentials: true }) .then((response) => { if (response.data.logged_in) { setLoginUser(response.data.user); setLoggedInStatus(true); } else { setLoggedInStatus(false); // history.push("/signin"); } }) .catch((error) => { console.log("ログインステータスエラー", error); }); setIsLoaded(true); }; useEffect(() => { checkLoginStatus(); }, []); if (!isloaded) { return <div>読み込み中です</div>; } else { return ( <div className="App"> <Router> <Header loginUser={loginUser} logout={logout} loggedInStatus={loggedInStatus} /> <Switch> <Route exact path={"/signin"} render={(props) => ( <SignIn {...props} loggedInStatus={loggedInStatus} login={login} /> )} /> <Auth loggedInStatus={loggedInStatus}> <Switch> <Route exact path="/" component={TopPage} /> <Route exact path="/users/:id" component={UserMyPage} /> <Route exact path={"/users/:id/edit"} render={(props) => ( <UserEdit {...props} loginUser={loginUser} /> )} /> <Route exact path={"/signup"} render={(props) => ( <SignUp {...props} loggedInStatus={loggedInStatus} login={login} /> )} /> <Route exact path={"/users"} render={(props) => ( <UserList {...props} loggedInStatus={loggedInStatus} /> )} /> <Route exact path="/gyms" component={GymsAndMap} /> <Route exact path="/gyms/registration" component={GymRegistraion} /> <Route exact path="/users/:userId/trainings/:trainingId" component={TrainingPage} /> <Route exact path="/searchResult" component={SearchResultPage} /> <Route component={NotFound} /> </Switch> </Auth> </Switch> </Router> </div> ); } }; export default Routing;

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

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

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

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

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

gozikyu

2021/04/02 23:49

hoshi-takanoriさん アドバイス、記事の共有ありがとうございます。 ルーティングにSwitchを使用しているので、そこに問題がありそうです。 何が問題か、記事を読ませていただきましたが理解しきれていないので、もう少しSwitch関連の調査を行ってみたいと思います。 それと、レンダーされないのは、上記のcomputedMatchのエラーではない事がわかりました、、、 レンダーがされないのと、computedMatchのワーニングは切り分けて対応するようにいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問