React- Getting a white screen

Question

I was trying to create a simple react app using create-react-app. I wanted to use react-router and test that I have the routing set up nicely. However, when I tried to run the app using npm start, I am just seeing a white screen and this really confused me as I cannot find a source for my error.

This is my package.json file.

{
  "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"
    ]
  }
}

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

Answer 1

You need to put

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

Somewhere to tell react inside which HTML element to put all the components