MERN Stack TodoAPP添加Route后页面空白，请求技术排查

你遇到的页面空白问题，核心是React Router版本不兼容导致的：

• 你参考的教程使用的是React Router v5版本，而当前项目中安装的是React Router v6版本，两者的Route组件用法存在重大差异。
• 在React Router v5中，Route通过component属性指定要渲染的组件；但v6版本的Route要求element属性必须传入JSX元素（即<组件名 />这种带尖括号的形式），你代码里直接传递了组件引用（比如TodosList），导致React无法正确渲染组件，最终页面显示空白。

快速修复方案 #

修改所有Route的element属性值，将组件改为JSX形式即可：

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import CreateTodo from "./components/create-todo.component";
import EditTodo from "./components/edit-todo.component";
import TodosList from "./components/todos-list.component";
class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
             <h2>MERN-Stack Todo App</h2>
              <Route path="/" exact element={<TodosList />} />
              <Route path="/edit/:id" element={<EditTodo />} />
              <Route path="/create" element={<CreateTodo />} />
            </div>
      </Router>
    );
  }
}

export default App;   

如果想完全匹配教程的写法，也可以降级到React Router v5版本：

npm uninstall react-router-dom
npm install react-router-dom@5

内容的提问来源于stack exchange，提问作者swiftboy