React-Router添加路径后无法渲染路由的问题求助

我正在学习React教程的React Router部分，原本App.js中的基础组件均可正常渲染，但将部分组件包裹在<Routes>标签并添加path=""和element={}属性后出现异常。已针对2021年教程与React Router 6的差异修改代码，包括将components改为elements、Switch改为Routes等。

问题现象 #

访问localhost:3000时，Header、Nav、Home和Footer组件均正常渲染；但访问localhost:3000/post、localhost:3000/post/1或localhost:3000/about时页面空白，对应路由组件未渲染。

相关代码 #

App.js #

import Header from './Header';
import Nav from './Nav';
import Footer from './Footer';
import Home from './Home';
import NewPost from './NewPost';
import PostPage from './PostPage';
import About from './About';
import Missing from './Missing';
import { Router, Route, Routes, useHistory } from 'react-router-dom';
import { useState, useEffect } from 'react';

function App() {
  return (
    <div className="App">
      <Header />
      <Nav />
      <Routes>
        <Route path="" element={<Home />} />
        <Route path="post" element={<NewPost />} />
        <Route path="post/:id" element={<PostPage />} />
        <Route path="about" element={<About />} />
        <Route path="*" element={<Missing />} />
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

index.js #

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

ReactDOM
  .createRoot(document.getElementById('root'))
  .render(
    <Router>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>  
    </Router>
  );

NewPost.js #

import React from 'react'

const NewPost = () => {
  return (
    <main>
      <h1>NewPost</h1>
    </main>
  )
}

export default NewPost

怀疑问题出在App.js、index.js或NewPost.js中，已查阅相关问题但未找到解决方法，完整代码已上传至GitHub仓库，恳请帮忙排查。

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