文章/答案/技术大牛

发布

社区首页 >问答首页 >ReactJS导入不工作的空白网页

问ReactJS导入不工作的空白网页
EN

Stack Overflow用户

提问于 2020-11-25 16:20:36

回答 3查看 541关注 0票数 1

我是一个初学者，学习ReactJS，并试图做一个全堆栈测试web应用程序使用DjangoRestFramework+ReactJS。

The Problem

我没有看到任何渲染到我的网页时，我尝试使用进口。我没有收到任何错误，但我的网页是空白的。

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>

还有我的HomePage文件

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

  }
}

我尝试了什么

当我将<h1>Hello World</h1>替换为<HomePage \>时，它按照预期将Hello World呈现到网页上。但是，当我将<HomePage \>或任何其他标记(如<CreateGamePage \> )放在App.js中时，没有任何东西呈现到网页上。我在Webpack的编撰上没有任何错误。

javascript

reactjs

django

django-rest-framework

django-react

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-11-25 18:02:56

我想出来了！问题不是我的代码，而是我的HomePage.js文件中的拼写错误。我试图从CreateRoomPage中导入CreateGamePage，而实际上在CreateRoomPage中并不存在，正确的是CreateGamePage。谢谢大家的帮助！

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

在之后

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

票数 0

Stack Overflow用户

发布于 2020-11-25 16:31:39

尝试使用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>

票数 1

Stack Overflow用户

发布于 2020-11-25 17:39:40

将路由器添加到父元素

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

将HomePage文件更改为

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65008705

复制

相似问题

问ReactJS导入不工作的空白网页
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ReactJS导入不工作的空白网页EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ReactJS导入不工作的空白网页
EN