ReactJs: Blank page in browser after running build on create-react-app on localhost

[weblinxpro]

I am creating an app that consume rest api and display the results, after completing the
app and i ran the build it shows blank screen see the code below

import React from "react";
import Home from "./webpages/Home";

function App() {
  return (
    <div>
      <Home />
    </div>
  );
}
export default App;

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import User from "./User";
import UserDetail from "./UserDetail";

const Home = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" exact component={User} />
        <Route path="/user/:id" component={UserDetail} />
      </Routes>
    </Router>
  );
};
export default Home;

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";

const User = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users/")
      .then((res) => res.json())
      .then(
        (data) => {
          setIsLoaded(true);
          setUsers(data);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);
  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {users.map((user) => (
          <li>
            <Link to={`user/${user.id}`}>{user.name}</Link>
          </li>
        ))}
      </ul>
    );
  }
};
export default User;

Kindly advise on how the list of users can be displayed, since it is not given any error

Thanks in advance

[James_Hibbard]

Hi,

There is nothing obvious in your code that would be causing an error.

Did you try inspecting the console / network tab already? These might give you a clue as to what is not working.

Otherwise, if you want to stick your code up on GitHub (so that I can clone it, run it on my machine and see the problem you are having) then I don’t mind taking a look.

[weblinxpro]

Okay thank you