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;

它呈现一个空白的白页但没有显示错误！ App js 包含导航栏和其他链接我也用 React router dom 会不会有什么问题？？

Answer 1

组件 API 从 react-router-dom@5 显着更改为 react-router-dom@6。 Route 组件必须在 Routes 组件中呈现，并且 component 道具被替换为一个单独的 element 道具，需要一个 ReactNode 即 JSX.

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 migration guide。

Reactjs=> React App 渲染空白页错误

Reactjs=> React App rendering blank page error

node.js

reactjs

react-router

react-router-dom