React路由器显示空白页

我是React的新手,目前正在做一个教程中的项目。我的应用程序在静态路由方面一直运行良好,但是,一旦我在应用程序中引入react-router,我只会看到空白页面,没有任何错误。我在过去的两天里一直在寻找,并尝试了所有给定的解决方案,例如:

1. 将反应路由器dom降级到v5。
2. 使用精确关键字
3. 在组件和元素关键字之间切换
4. 使用路由和不使用路由。

然而,这些解决方案似乎都不起作用。我怀疑它可能与其他一些包依赖有关,但不确定要接触哪个包。以下是我的package.json配置:

  "name": "merstart",
  "version": "1.0.0",
  "description": "MERN practice",
  "main": "index.js",
  "scripts": {
    "start": "nodemon -w server server/server.js",
    "compile": "webpack",
    "watch": "webpack-dev-server --hot --no-client-overlay-runtime-errors",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.2",
    "express": "^4.19.2",
    "mongodb": "^6.8.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.3.0",
    "babel-polyfill": "^6.26.0",
    "nodemon": "^3.1.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.0",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-middleware": "^7.3.0",
    "webpack-dev-server": "^5.0.4",
    "webpack-hot-middleware": "^2.26.1",
    "whatwg-fetch": "^3.6.20"
  }
}

我的主要应用程序代码如下:

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



//import IssueAdd from './IssueAdd.jsx';

const contentNode = document.getElementById('contents');

const noMatch = ()=> <p>Page not found.</p>

const RoutedApp = ()=> {
    console.log("Reached routed app");
    <Router>
    <Routes>
        <Route path="/" action={()=>{console.log("action")}} loader={()=>{console.log("Loader")}} element={<IssueList />} />
        <Route path="/issueEdit" element={<IssueEdit />} />
        <Route path="*" element={<noMatch />} />
    </Routes>
    </Router>
    console.log("Reached end of router");
};

ReactDOM.render(<RoutedApp />,contentNode);

if(module.hot){
    module.hot.accept();
}

RoutedApp开始和结束的控制台日志都在控制台中打印,但第一个Route的控制台日志不会打印。请注意,如果我直接渲染我的IssueList.jsx,它工作得很好,但当我尝试使用react-router时,它失败了。

没有可显示的错误。请问有人可以指导吗。