Reactjs=> React App 渲染空白頁錯誤

Question

我的代碼：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<div><App/><h1> Hello </h1></div>,document.getElementById('root'));

我的 App.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route} from "react-router-dom";
import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <Router>
       <div className="container">
       <Navbar />
       <br/>
       <Route path="/" exact component={ExercisesList} />
       <Route path="/edit/:id" component={EditExercise} />
       <Route path="/create" component={CreateExercise} />
       <Route path="/user" component={CreateUser} />
       </div>
     </Router>
  );
}

export default App;

它呈現一個空白的白頁但沒有顯示錯誤？ 應用程序 js 包含一個導航欄和其他鏈接我也使用反應路由器 dom 可能有問題嗎？

Answer 1

組件 API 從react-router-dom@5到react-router-dom@6發生了顯着變化。 Route組件必須在Routes組件中呈現，並且component prop 被替換為采用ReactNode即 JSX 的單個element prop。

import { BrowserRouter as Router, routes, Route} from "react-router-dom";
import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <Router>
      <div className="container">
        <Navbar />
        <br/>
        <Routes>
          <Route path="/" element={<ExercisesList />} />
          <Route path="/edit/:id" element={<EditExercise />} />
          <Route path="/create" element={<CreateExercise />} />
          <Route path="/user" element={<CreateUser />} />
        </Routes>
      </div>
    </Router>
  );
}

有關版本之間所有更改的更多詳細信息，請參閱v5-v6 遷移指南。