ReactJS 导入不工作空白网页
ReactJS Imports not working blank webpage
我是 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 编译时没有收到任何错误。
尝试使用 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>
将路由器添加到父元素
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
。谢谢大家的热心回复!
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 的初学者,正在尝试使用 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 编译时没有收到任何错误。
尝试使用 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>
将路由器添加到父元素
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
。谢谢大家的热心回复!
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>
);
}