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

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

ただいまの
回答率

88.03%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 101

score 4

以下の内容で開発をしており、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;
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • hoshi-takanori

    2021/04/03 03:12

    react-router の Switch の使い方が間違ってる時に出るようですが、心当たりはありますか?
    https://stackoverflow.com/questions/51971449/react-warning-computedmatch-regarding-some-case-issues

    キャンセル

  • gozikyu

    2021/04/03 08:49

    hoshi-takanoriさん
    アドバイス、記事の共有ありがとうございます。
    ルーティングにSwitchを使用しているので、そこに問題がありそうです。
    何が問題か、記事を読ませていただきましたが理解しきれていないので、もう少しSwitch関連の調査を行ってみたいと思います。

    それと、レンダーされないのは、上記のcomputedMatchのエラーではない事がわかりました、、、
    レンダーがされないのと、computedMatchのワーニングは切り分けて対応するようにいたします。

    キャンセル

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

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

  • ただいまの回答率 88.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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