I am following this tutorial on YouTube
[https://www.youtube.com/watch?v=7CqJlxBYj-M]
and I have followed each step carefully, installing the required packages.
Despite the tutorial, I haven’t installed the Bootstrap package.
So far, this is my 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;
and I haven’t touched any other files in the src folder.
This is the Navbar component:
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>
);
}
}
and the exercises-list.component:
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"
]
}
}
I am getting this error message:
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
Can someone please help me out here? Thanks in advance!
I have tried re-installing react-router-dom and react-router packages. I expected the application to show the Navbar component, but it doesn’t show anything.