Npm Start Returning index.html instead of React Rendered Page

May 11, 2022

I’m new to react but something is not working on the backend.

When I run npm start it servers up the blank index.html page instead of rendering from index.js
Everything works fine in code sandbox, but I can’t run it locally.

Here is my index.js file

    ReactDOM.Render(
  <HashRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/admin" element={<Admin />} />
    </Routes>
  </HashRouter>,
  document.getElementById("root")
)

App.js

import React, { useState } from "react";

import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Button from "react-bootstrap/Button";
import Header from "./components/Header.js";
import Navbar from "./components/Navbar.js";
import Sidebar from "./components/Sidebar.js";
import BlogShell from "./components/BlogShell.js";

import "./css/App.css";

const App = () => (
  <body>
    <Container className="p-3">
      <Header />
      <Navbar titles="Home,Link 1,Link 2,Link 3"></Navbar>
      <h1 className="jumbotron">Blog Template</h1>
    </Container>

    <Container>
      <Row>
        <BlogShell title="Test"></BlogShell>
        <Sidebar />
      </Row>
    </Container>
  </body>
);

export default App;

I tried putting "homepage": ".", in my package.json, but it didn’t work.

>Solution :

Can you post what is in your App.js file too please?

Because it could possibly be dependent on what is in that file.

However, this is what will generally be within an index.js file when you start a new-react-app

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

I would then maybe try doing the routing within the App.js file and then adding your components/pages from there.

For example, this would be the App.js file:

import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/admin' element={<Admin />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Then after this, create the homepage as a seperate Home.js file and put whatever you like in there, aswell as the admin page and so on.

This is generally the format of how you should be creating your react application, or at least thats how I know it to be.

Hope this helps!