我的终端读取webpack编译成功，但连接到react-dom后浏览器页面为空

Question

这是我的app.js

import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import Profile from "./pages/profile/Profile";
import Register from "./pages/register/Register";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Router>
<Routes>
<Route path="/">
<Home />
</Route>
<Route path="/login">
<Login />
</Route>
<Route path="/register">
<Register />
</Route>
<Route path="/profile">
<Profile />
</Route>
</Routes>
</Router>
);
}
export default App;

这是我的index.js (connections)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

和react, react dom等的版本在下面提到

{
"name": "ft-app-four",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
}

终端提示现在可以在浏览器中查看ft-app-four

本地:http://localhost:3000
在您的网络:http://192.168.42.136:3000

注意，开发构建没有优化。要创建一个产品版本，使用npm run build.

webpack编译成功

但是我无法在浏览器屏幕上查看任何内容

Answer 1

react-router的路由工作方式在v5和v6之间发生了重大变化。

v6的正确语法是:

<Route path="/" element={<Home />} />