React 18+react-router-dom+Amplify本地运行空白屏问题求助

执行npm start启动开发预览时页面显示空白，该问题出现在安装react-router-dom并尝试配置路由之后。

相关代码文件 #

index.js #

import React from 'react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createRoot } from 'react-dom/client';
import "@aws-amplify/ui-react/styles.css"; // Ensure React UI libraries are styled correctly
import { Amplify } from 'aws-amplify'
import awsconfig from './aws-exports'
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
Amplify.configure(awsconfig) // Configures the Amplify libraries with the cloud backend set up via the Amplify CLI

import { render } from 'react-dom';
const container = document.getElementById('app');
//render(<App tab="home" />, container);

const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
  <React.StrictMode>
    <Routes>
      <Route path="/" element={<App />}>
      </Route>
    </Routes>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.js #

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

function App() {
  return (
    <div className="app">
      <Routes>
        <Route path="*" element={<NoMatch />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </div>
  );
}

export default App;

Home.js #

import React from 'react'

function Home() {
  return(
    <div>
      <h1>Welcome to the home page!</h1>
    </div>
  );
}

export default Home;

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

补充说明 #

已查阅相关问题帖子并尝试多种解决方案，但问题仍未解决。当前项目文件结构如下：

内容的提问来源于stack exchange，提问作者Xavier