ReactJS 导入无效的空白网页

Question

I am a beginner learning ReactJS and was trying to make a full-stack quiz web application using DjangoRestFramework+ReactJS.我是一名初学者，正在学习 ReactJS，并试图使用 DjangoRestFramework+ReactJS 进行全栈测验 web 应用程序。

The Problem问题

I am not seeing anything rendering to my webpage when I try using imports.当我尝试使用导入时，我没有看到任何渲染到我的网页上。 I am not getting any errors, but my web page is blank.我没有收到任何错误，但我的 web 页面是空白的。

My Files我的文件

Here is my App.JS.这是我的 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);

My Index.html我的索引.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>

And my HomePage file还有我的主页文件

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我试过的

When I put <h1>Hello World</h1> in place of <HomePage \> , It rendered the Hello World to the webpage as expected.当我将<h1>Hello World</h1>代替<HomePage \>时，它按预期将Hello World呈现到网页。 But when I put the <HomePage \> or any other tag such as <CreateGamePage \> In App.js , nothing renders to the webpage.但是，当我将<HomePage \>或任何其他标签（例如<CreateGamePage \> App.js时，不会向网页呈现任何内容。 I am not getting any errors on Webpack compilation.我在 Webpack 编译时没有收到任何错误。

Answer 1

Try with id #main尝试使用 id #main

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

and just change HomePage.js to check只需更改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

Add router to the parent element将路由器添加到父元素

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);

Change the HomePage file to将主页文件更改为

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

I figured it out, The issue was not with my code, it was a misspelling in my HomePage.js file.我想通了，问题不在于我的代码，而是我的HomePage.js文件中的拼写错误。 I was trying to import CreateRoomPage from CreateGamePage when in fact in CreateRoomPage did not exist, the correct one was CreateGamePage .我试图从CreateGamePage导入CreateRoomPage而实际上CreateRoomPage不存在，正确的是CreateGamePage 。 Thank you all for the helpful responses!谢谢大家的帮助！

Before HomePage.JS在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 导入无效的空白网页

问题描述

3 个解决方案

解决方案1
1 2020-11-25 16:31:39

解决方案2
1 2020-11-25 17:39:40

解决方案3
0 已采纳 2020-11-25 18:02:56

ReactJS 导入无效的空白网页

问题描述

3 个解决方案

解决方案1 1 2020-11-25 16:31:39

解决方案2 1 2020-11-25 17:39:40

解决方案3 0 已采纳 2020-11-25 18:02:56

解决方案1
1 2020-11-25 16:31:39

解决方案2
1 2020-11-25 17:39:40

解决方案3
0 已采纳 2020-11-25 18:02:56