I’m a beginner to React and I wanted to use React on the frontend. For some reason, every time I run ‘npm start’, it keeps routing to my public/index.html file rather than my index.js file which has all the components I want to run.
Code:
package.json
"main": "src/index.js",
"dependencies": {
"accepts": "^1.3.8",
"axios": "^1.7.2",
"base64id": "^2.0.0",
"cookie": "^0.4.2",
"cors": "^2.8.5",
"debug": "^4.3.5",
"engine.io": "^6.5.5",
"engine.io-parser": "^5.2.2",
"mime-db": "^1.52.0",
"mime-types": "^2.1.35",
"ms": "^2.1.2",
"negotiator": "^0.6.3",
"object-assign": "^4.1.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-redux": "^9.1.2",
"react-router-dom": "^6.24.0",
"react-scripts": "^5.0.1",
"redux": "^5.0.1",
"socket.io": "^4.7.5",
"socket.io-adapter": "^2.5.5",
"socket.io-parser": "^4.2.4",
"start": "^5.1.0",
"undici-types": "^5.26.5",
"vary": "^1.1.2",
"ws": "^8.17.1"
},
"scripts": {
"start": "react-scripts start src/index.js",
"build": "react-scripts build src/index.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
index.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// import { createRoot } from 'react-dom/client';
import './App.css';
import HomePage from './components/HomePage';
function App() {
return (
<Router basename="http://localhost:3000/">
<Routes>
<Route path="/" element={<HomePage />} />
{/* Add more routes as needed */}
</Routes>
</Router>
);
}
export default App;
I’ve been trying a number of different things like deleting package.json and lock and then reinstalling, commenting out appHtml from paths.json, etc. When I run npm start
, I just want it to route strictly to index.js where I handle my other routes (i.e. ‘/’ loads my HomePage.js file).
However, when I load my react project on the browser and check inspect element -> network, I see that it’s clearly hitting my index.html page (which is all commented out for now), so I just see a blank page on localhost:3000/. Any suggestions? Please let me know if I’m misunderstanding something about React as I’m still learning 🙂