ReactJS导入无法工作的空白网页

我是学习ReactJS的初学者，曾试图使用DjangRestFramework+ReactJS制作一个全栈测试web应用程序。

问题

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

我的文件

这是我的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);

我的索引.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>
);
}
}

我尝试了什么

当我把<h1>Hello World</h1>放在<HomePage >的位置时，它将Hello World按预期呈现到网页上。但是，当我在App.js中放入<HomePage >或任何其他标签(如<CreateGamePage >(时，网页上不会出现任何内容。我在编译Webpack时没有收到任何错误。

尝试使用id#main

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

只需更改主页.js即可检查

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

将路由器添加到父元素

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

我想通了！问题不在于我的代码，而是我的HomePage.js文件中的拼写错误。我试图从CreateGamePage导入CreateRoomPage，但实际上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>
);
}

相关内容

最新更新

热门标签：