Music-Controller-Web-App-Tutorial Nothing shown on the screen

I ran server and accessed to 'http://127.0.0.1:8000/'. But nothing displayed on screen. And it loads perpetually. 에러 화면 캡처

I ran python server in a pipenv environment.

Aug 16 '21 07:08 oong00

I ran server and accessed to 'http://127.0.0.1:8000/'. But nothing displayed on screen. And it loads perpetually.

I ran python server in a pipenv environment.

Yea nothing get on the screen

Nov 12 '21 09:11 manav4245

import React, { Component } from "react"; import RoomJoin from "./RoomJoin"; import CreateRoomPage from "./CreateRoomPage"; import Room from "./Room";

import { BrowserRouter as Router, Routes, Route, Link, Redirect } from "react-router-dom";

export default class HomePage extends Component { constructor(props) { super(props); }

render() {
  return (
    <Router>
        <Routes>
            <Route path='/' element={<p>This is the homepage</p>} />
            <Route path='/join' element={<RoomJoin/> } />
            <Route path='/create' element={<CreateRoomPage/>} />
        </Routes>
    </Router>
  );
}

}

### Use this code in HomePage.js

Dec 11 '21 12:12 kanak6040

App.js

import React, { Component } from "react";
import { render } from "react-dom";

export default class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <h1>Testing React Code</h1>
            </div>
        );
    }
}

const appDiv = document.getElementById("app");
render(<App />, appDiv);

Index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Django React</title>
    {% load static %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" />
</head>

<body>
    <div id="main">
        <div id="app"></div>
    </div>

    <script src="{% static 'frontend/main.js' %}"></script>
</body>

</html>

Settings

STATIC_URL = '/static/'


STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

Dec 21 '21 12:12 alexminyuk

Try to check if the render in the imports is in the curly brackets. It should be in the curly brackets like this { render } I had the same problem, worked for me!

Jan 14 '22 00:01 Saksham1009

I also faced this problem.This is probably the version problem.React Router version 5 &version 6. Switch Replaced With Routes. The component that should be rendered on matching a route can not be written as children of the Route component, but it takes a prop called element where we have to pass a JSX component for that to be rendered.

HomePage.js

render() { return ( <Router> <Routes> <Route path='/' element={<p>This is the homepage</p>} /> <Route path='/join' element={<RoomJoinPage/> } /> <Route path='/create' element={<CreateRoomPage/>} /> </Routes> </Router> ); }

Feb 19 '22 06:02 WChloeW

Nothing shown on the screen - tutorial 4

HomePage.js