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

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

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

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

React.js

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

Q&A

解決済

1回答

3308閲覧

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

soraie

総合スコア0

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

React.js

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

0グッド

0クリップ

投稿2021/08/06 04:19

前提・実現したいこと

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.jsSwitch を抜いてみたり、ネットで「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

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

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

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

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

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

guest

回答1

0

自己解決

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

投稿2021/08/06 07:34

soraie

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問