未捕获的运行时错误：调度程序为空

Question

我正在 YouTube 上关注本教程 [https://www.youtube.com/watch?v=7CqJlxBYj-M] 我仔细地遵循了每一步，安装了所需的软件包。 尽管有教程，我还没有安装 Bootstrap 包。 到目前为止，这是我的 App.js

import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route } from "react-router-dom";

import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component.js"

function App() {
  return (
    <Router>
      <Navbar />      
      <br/>
      <Route path="/" exact component={ExercisesList} />
    </Router>
    
  );
}

export default App;

并且我没有触及 src 文件夹中的任何其他文件。

这是导航栏组件：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Navbar extends Component {

  render() {
    return (
      <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
        <Link to="/" className="navbar-brand">ExcerTracker</Link>
        <div className="collpase navbar-collapse">
        <ul className="navbar-nav mr-auto">
          <li className="navbar-item">
          <Link to="/" className="nav-link">Exercises</Link>
          </li>
          <li className="navbar-item">
          <Link to="/create" className="nav-link">Create Exercise Log</Link>
          </li>
          <li className="navbar-item">
          <Link to="/user" className="nav-link">Create User</Link>
          </li>
        </ul>
        </div>
      </nav>
    );
  }
}

和练习列表.组件：

import React, {Component} from 'react';

export default class ExercisesList extends Component {
    render() {
        return (
            <div>
                <p>Test</p>
            </div>
        )
    }
}


My package.json file: 

{
  "name": "mern-exercise-tracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "cors": "^2.8.5",
    "dotenv": "^16.4.2",
    "express": "^4.18.2",
    "mongoose": "^8.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.22.0",
    "react-router-dom": "^6.22.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我收到此错误消息：

dispatcher is null
useRef@http://localhost:3000/static/js/bundle.js:73943:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:70161:55
renderWithHooks@http://localhost:3000/static/js/bundle.js:20190:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:23474:17
beginWork@http://localhost:3000/static/js/bundle.js:24770:20
callCallback@http://localhost:3000/static/js/bundle.js:9786:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:9830:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:9887:35
beginWork$1@http://localhost:3000/static/js/bundle.js:29751:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:28999:16
workLoopSync@http://localhost:3000/static/js/bundle.js:28922:26
renderRootSync@http://localhost:3000/static/js/bundle.js:28895:11
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:28290:78
workLoop@http://localhost:3000/static/js/bundle.js:36302:46
flushWork@http://localhost:3000/static/js/bundle.js:36280:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:36517:25

有人可以帮我吗？预先感谢！

我尝试重新安装react-router-dom和react-router软件包。我希望应用程序显示导航栏组件，但它没有显示任何内容。

Answer 1

当您将 v6 作为依赖项安装时，除了使用较旧的 React-Router-DOM v5 代码语法之外，我在代码中没有看到任何问题。 查看更新以使用 V6 组件和 props 是否可以解决问题。

所有

Route
• 组件都需要由处理 URL 路径匹配路由的

  Routes

  组件渲染。
Route
• 组件将

  element

  prop 上的所有内容渲染为 JSX，而不是对 React 组件的引用。 所有路线现在始终完全匹配，没有
exact

• Route

  属性。
react-router-dom
• 重新导出 的 react-router

  ，无需将两者都包含为项目依赖项。卸载 

  react-router

   并将其从 

  package.json

   文件中删除。运行 

  npm uninstall --save react-router

   就足够了。

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component.js"

function App() {
  return (
    <Router>
      <Navbar />      
      <br/>
      <Routes>
        <Route path="/" element={<ExercisesList />} />
      </Routes?
    </Router>
  );
}

我认为该错误意味着 React 存在问题，特别是 React hooks，因此还请确保您已将

react

 正确安装为依赖项。