React-Routerで要素が表示されない

前提・実現したいこと

ReactとDjangoでオンラインでゲームができるようなウェブサイトを作ろうと思ったのですが、React-Routerを使ってページの切り替えをするところで上手くいかず困っています。

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

React側で

$ yarn run dev

を実行した後にDjango側で

$ python manage.py runserver

を実行し、http://127.0.0.1:8000 に行くとHomeコンポーネントが表示されるのですが、http://127.0.0.1:8000/join,http://127.0.0.1:8000/create に行っても何も表示されません。
開発者ツール、React、Djangoのどのコンソールを見てもエラーは出ていませんでした。

該当のソースコード

以下プロジェクトの構造とバグと関係ありそうなファイルのコードです。

django_react_game_app/
├─ api/
├─ django_react_game_app/
│  ├─ urls.py
├─ frontend/
│  ├─ src/
│  │  ├─ components/
│  │  │  ├─ App.js
│  │  │  ├─ Join.js
│  │  │  ├─ Home.js
│  │  │  ├─ Create.js
│  │  ├─ index.js
│  ├─ static/frontend/
│  │  ├─ main.js
│  ├─ templates/frontend/
│  │  ├─ index.html
│  ├─ views.py
│  ├─ urls.py
├─ package.json
├─ manage.py
├─ webpack.config.js
├─ yarn.lock
├─ manage.py

js
1// frontend/src/index.js
2
3import React from "react";
4import { render } from "react-dom";
5
6import App from "./components/App";
7
8render(<App />,document.getElementById("root"));
9

js
1// frontend/src/components/App.js
2import React from "react";
3import {
4    BrowserRouter as Router,
5    Route,
6    Switch,
7} from "react-router-dom";
8
9import Home from "./Home";
10import Join from "./Join";
11import Create from "./Create";
12
13export default class App extends React.Component {
14    render() {
15        return (
16            <Router>
17                <Switch>
18                    <Route exact path="/" component={Home} />
19                    <Route path="/join" componenet={Join} />
20                    <Route path="/create" componenet={Create} />
21                </Switch>
22            </Router>
23        );
24    }
25}

js
1// frontend/src/components/Home.js
2
3import React from "react";
4
5export default class Home extends React.Component {
6    render() {
7        return (
8            <h1>Home Page</h1>
9        );
10    }
11}

js
1// frontend/src/components/Create.js
2
3import React from "react";
4
5export default class Create extends React.Component {
6    render() {
7        return <h1>Create</h1>;
8    }
9}

js
1// frontend/src/components/Join.js
2
3import React from "react";
4
5export default class Join extends React.Component {
6    render() {
7        return <h1>Join</h1>;
8    }
9}

html
1<!-- frontend/templates/frontend/index.html -->
2
3<!doctype html>
4<html lang="en">
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport"
8          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
9    <meta http-equiv="X-UA-Compatible" content="ie=edge">
10    {% load static %}
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
12
13    <title>My Game App</title>
14</head>
15<body>
16    <div id="root">
17
18    </div>
19    <script src="{% static "frontend/main.js" %}"></script>
20</body>
21</html>

python
1# frontend/urls.py
2
3from django.urls import path
4from .views import index
5
6app_name = 'frontend'
7
8urlpatterns = [
9    path('', index, name=''),
10    path('join/', index),
11    path('create/', index),
12]
13

python
1# frontend/views.py
2
3from django.shortcuts import render
4
5
6# Create your views here.
7def index(request, *args, **kwargs):
8    return render(request, 'frontend/index.html')
9

python
1# django_react_game_app/urls.py
2
3from django.contrib import admin
4from django.urls import path, include
5
6urlpatterns = [
7    path('admin/', admin.site.urls),
8    path('', include('frontend.urls')),
9    path('api/', include('api.urls')),
10]
11

package.json

json
1{
2...
3    "scripts": {
4        "dev": "webpack --config webpack.config.js --mode development --watch"
5    },
6    "dependencies": {
7        "@babel/runtime": "^7.14.8",
8        "@material-ui/core": "^4.12.3",
9        "react-router-dom": "^5.2.0"
10    },
11    "devDependencies": {
12        "@babel/core": "^7.14.8",
13        "@babel/plugin-transform-runtime": "^7.14.5",
14        "@babel/preset-env": "^7.14.9",
15        "@babel/preset-react": "^7.14.5",
16        "babel-loader": "^8.2.2",
17        "react": "^17.0.2",
18        "react-dom": "^17.0.2",
19        "webpack": "^5.47.1",
20        "webpack-cli": "^4.7.2",
21        "webpack-dev-server": "^3.11.2"
22    }
23}

js
1// webpack.config.js
2
3const path = require("path");
4const webpack = require("webpack");
5
6module.exports = {
7    entry: "./frontend/src/index.js",
8    module: {
9        rules: [
10            {
11                test: /.(js|jsx)$/,
12                exclude: /(node_modules|bower_components)/,
13                loader: 'babel-loader',
14                options: {
15                    presets: ['@babel/preset-react', '@babel/preset-env'],
16                    plugins: ['@babel/plugin-transform-runtime'],
17                }
18            },
19            {
20                test: /.css$/,
21                exclude: /(node_modules|bower_components)/,
22                use: ['style-loader','css-loader']
23            }
24        ]
25    },
26    output: {
27        path: __dirname + "/frontend/static/frontend",
28        filename: "main.js"
29    },
30};

試したこと

ReactとDjangoのPathの部分を色々変更してみたり(join/, /join, /join/, join)、App.js の Switch を抜いてみたり、ネットで「React Router Django 表示されない」と調べたりしてみましたがどれも上手くいきませんでした。

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

webpackのversion

$ webpack --version

webpack 5.48.0
webpack-cli 4.7.2        
webpack-dev-server 3.11.2

djangoのversion

$ django-admin --version

3.2.5

行動規範の内容に同意します

回答1件

自己解決

自分で解決することができました。Routeの中のcomponentという綴りを間違えていたようです。どうりでエラーが出ないわけです。
OK: component
NG: componenet

投稿2021/08/06 07:34

soraie

総合スコア0

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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