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

Question

Here is my 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;

and here is my 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')
);

and the versions of react, react dom etc are mentioned below

{
  "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"
  }

The terminal says You can now view ft-app-four in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.42.136:3000

Note that the development build is not optimized. To create a production build, use npm run build.

webpack compiled successfully

but I am unable to view anything on the browser screen

Answer 1

The way routing works in react-router changed significantly between v5 and v6 .

The correct syntax for v6 is:

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