• • 此问题在此处已有答案**：

React Router Dom routes are returning blank pages（2个答案）
8个月前关闭。
我正在使用这个React Tutorial on YouTube，但是我不能让我的路由在自己的开发服务器上呈现。
This是我的主屏幕正在渲染的。我的主屏幕应该在导航栏下面显示粉红色的背景。
我怀疑错误发生在App.js代码的这一部分，因为除之外的其他部分都工作正常：

<Routes>
  <Route exact path="/" component={HomeScreen}/>
</Routes>

我使用的是React路由器dom v6.3.0
我的App.js代码：

import './App.css';
import { useState } from "react";
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";

// Screens
import HomeScreen from './screens/HomeScreen';

// Components 
import Navbar from './components/Navbar';
import SideDrawer from './components/SideDrawer';
import Backdrop from './components/Backdrop';

function App() {
  const [sideToggle, setSideToggle] = useState(false);

  return (
    <Router>
      <Navbar click={() => setSideToggle(true)} />
      <SideDrawer show={sideToggle} click={() => setSideToggle(false)} />
      <Backdrop show={sideToggle} click={() => setSideToggle(false)} />
      <main>
        <div className="app">This is a test</div>
        <Routes>
          <Route exact path="/" component={HomeScreen}/>
        </Routes>
      </main>
    </Router>
  );
}

export default App;

我的index.js代码：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

我的主屏幕代码：

import "./HomeScreen.css";

const HomeScreen = () => {
  return (
    <div className="homescreen">
      Home Screen
    </div>
  )
}

export default HomeScreen

希望有人能给一些建议，以React新手？请让我知道，如果我需要提供更多的信息。