我的终端正在读取编译成功的 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（连接）

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-4。

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

请注意，开发版本未优化。要创建生产版本，请使用 npm 运行 build.

webpack编译成功

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

Answer 1

路由在 react-router 中的工作方式发生了显着变化 between v5 and v6。

v6 的正确语法是：

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

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

My terminal is reading webpack compiled successfully but browser page is empty after connecting to react-dom

javascript

npm

reactjs

react-dom