网页为空白（react-router 问题）答案

【问题标题】：Web page is blank (Problem with react-router)网页为空白（react-router 问题）
【发布时间】：2021-12-28 04:59:01
【问题描述】：

我正在尝试学习 MERN，主要通过遵循教程 (https://www.youtube.com/watch?v=7CqJlxBYj-M) 做出反应，并且我完全按照代码进行操作，但是当我运行服务器并打开网页时，它是空白的。我知道问题出在四个 React 路由路径上，因为如果我删除它们，网页会显示导航栏。运行服务器时我也没有收到任何错误。这是 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;

这是创建练习的代码：

import React, { Component } from 'react';


export default class CreateExercise extends Component{

    render() {
        return (
            <div>
                <p>You are on the create exercises List componentt</p>
            </div>
          
        )
    }
}

其他三个具有相同的代码。这是包含教程代码的 github 的链接： https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqa3VfM2thaXc4b1RoODUxWkh0MXprN2NFV3E2QXxBQ3Jtc0trbTdTQll1WmVFQ1hRb0ZOVWlUVVROUG1ta2RranJocVFmektvb0F0VWpKQjNWY0tIelBuZ1ZLNDU5VVFhSVZiS3VGTnJHT19ja0NYdVI3OFdkZVVQS0ZoLV8wQkxhT2xqeS0yakNPSXNyZjlLTW5Vbw&q=https%3A%2F%2Fgithub.com%2Fbeaucarnes%2Fmern-exercise-tracker-mongodb

【问题讨论】：

服务器上没有错误，但浏览器开发者工具控制台（F12）呢？
您使用的是哪个 react-router 版本，如果是 v6，则使用元素而不是组件。
我的 react-router-dom 版本是 6.2.1 我应该用元素切换组件吗？

标签： javascript node.js reactjs create-react-app mern

【解决方案1】：

在 React-Router 版本 6 中，您需要使用元素

https://reactrouter.com/docs/en/v6/getting-started/tutorial#add-some-routes

例子：

<Route path="/" element={<App />} />
<Route path="expenses" element={<Expenses />} />
<Route path="invoices" element={<Invoices />} />

【讨论】：

我做了这个改变 }> } /> } /> } /> 虽然没有任何改变，但我运行它时仍然是一个空白页