ReactJS 导入不工作空白网页

Question

我是 ReactJS 的初学者，正在尝试使用 DjangoRestFramework+ReactJS 制作一个全栈测验 Web 应用程序。

The Problem

当我尝试使用导入时，我没有看到任何呈现到我的网页的内容。我没有收到任何错误，但我的网页是空白的。

My Files

这是我的 App.JS.

import { render } from "react-dom";
import HomePage from "./HomePage";
import GameJoinPage from "./GameJoinPage";

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

  render() {
    return (
      <HomePage />
    );
  }
}

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

我的Index.html

<! DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-9">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quiz App</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>

还有我的主页文件

import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateRoomPage from "./CreateGamePage";
import { 
  BrowserRouter as Router, Switch, Route, Link, Redirect} from "react-router-dom";

export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }
  render(){
    return (
      <Router>
        <Switch>
          <Route exact path="/"><p>This is the home page</p></Route>
          <Route path="/join" component={GameJoinPage} />
          <Route path="/create" component={CreateGamePage} />
        </Switch>
    </Router>
    );

  }
}

What I tried

当我用 <h1>Hello World</h1> 代替 <HomePage \> 时，它按预期将 Hello World 呈现到网页。但是，当我将 <HomePage \> 或任何其他标记（例如 <CreateGamePage \> 放入 App.js 时，网页不会呈现任何内容。我在 Webpack 编译时没有收到任何错误。

Answer 1

尝试使用 id #main

const appDiv = document.getElementById("main");

然后将 HomePage.js 更改为检查

<Switch>
    <Route exact path="/" render={()=> <h2>render default page</h2>}/>
    <Route path="/join" component={GameJoinPage} />
    <Route path="/create" component={CreateGamePage} />
</Switch>

Answer 2

将路由器添加到父元素

import { render } from "react-dom";
import HomePage from "./HomePage";
import GameJoinPage from "./GameJoinPage";
import { BrowserRouter as Router } from "react-router-dom";

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

  render() {
    return (
      <Router>
        <HomePage />
      </Router>
    );
  }
}

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

将主页文件更改为

import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateRoomPage from "./CreateGamePage";
import { Switch, Route, Link, Redirect } from "react-router-dom";

export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Switch>
        <Route exact path="/" render={() => <p>This is the home page</p>} />
        <Route path="/join" component={GameJoinPage} />
        <Route path="/create" component={CreateGamePage} />
      </Switch>
    );
  }
}

Answer 3

我想通了！问题不在于我的代码，而是我的 HomePage.js 文件中的拼写错误。我试图从 CreateGamePage 中导入 CreateRoomPage，但实际上 CreateRoomPage 中并不存在，正确的是 CreateGamePage。谢谢大家的热心回复！

Before HomePage.JS

import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateGamePage from "./CreateGamePage"; // Now its correct!
import { Switch, Route, Link, Redirect } from "react-router-dom";

export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Switch>
        <Route exact path="/" render={() => <p>This is the home page</p>} />
        <Route path="/join" component={GameJoinPage} />
        <Route path="/create" component={CreateGamePage} />
      </Switch>
    );
  }

After

import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateRoomPage from "./CreateGamePage";
import { Switch, Route, Link, Redirect } from "react-router-dom";

export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Switch>
        <Route exact path="/" render={() => <p>This is the home page</p>} />
        <Route path="/join" component={GameJoinPage} />
        <Route path="/create" component={CreateGamePage} />
      </Switch>
    );
  }

ReactJS 导入不工作空白网页

ReactJS Imports not working blank webpage

javascript

reactjs

django

django-rest-framework

django-react