我的终端正在读取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-four。

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

请注意，开发构建未得到优化。 要创建生产构建，请使用NPM运行构建。

WebPack成功编译了

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

Answer 1

路由在react-router中的工作方式发生了显着更改。

V6的正确语法是：

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