Javascript 反应-得到一个白色屏幕

我试图使用CreateReact应用程序创建一个简单的react应用程序。我想使用react路由器并测试我是否已经很好地设置了路由。然而，当我尝试使用npm start运行应用程序时，我只看到一个白色屏幕，这让我非常困惑，因为我找不到错误的来源。

这是我的package.json文件

{
  "name": "blog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我的index.js

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import Home from "./Components/Home";
import Error from "./Components/Error";
import Blog from "./Components/Blog";

//switch ensures the rendering of only one component
// Route tag are the links b/w the components and placed b/w switch tags
function App() {
  return (
    <Router>
      <div className="App">
        <ul>
          <li>
            <Link to="/">Home </Link>
          </li>
          <li>
            <Link to="/blog">Blog </Link>
          </li>
        </ul>
        <div>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/blog" component={Blog} />
            <Route component={Error} />
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;

从“React”导入React；
导入“/App.css”；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Link}；
从“/Components/Home”导入主页；
从“/Components/Error”导入错误；
从“/Components/Blog”导入博客；
//开关确保仅渲染一个组件
//路线标签是连接部件和放置开关标签的链接
函数App（）{
返回(


家


博客


);
}
导出默认应用程序；

您需要将

ReactDOM.render(<App/>, document.getElementById('root'));

ReactDOM.render（，document.getElementById（'root'）；

---

告诉react在哪个HTML元素中放置所有组件的地方

您是否在任何地方渲染应用程序？不，不。我可以只在函数App（）中使用render（）吗？我刚刚这么做了，但是它给了我一个警告：“函数作为子函数无效。”。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者你是想调用这个函数而不是返回它。”在控制台中。我在App（）之前把这个语句放在index.js中。我的错误是，你需要

。我已经更新了我的答案。还要确保在HTMLoh man中有一个名为

root

的元素，这就是错误所在。谢谢你的帮助！它起作用了