ReactJs Routing Issue on Github Pages URL

Question

I have a problem with REACTJS routing when I deployed my webpage in Github, I don't know why the routing leading to the Error Page.

(this is the default URL in github).

https://account-name.github.io/repository-name/

(this is my routing) .

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/pokedex" element={<Pokedex />} />
    <Route path="*" exact element={<ErrorPage />} />
  </Routes>
</Router>

I am expecting, when I access the webpage in GITHUB PAGES the default page that will show is the Home Page. What is the proper routing for this when using github pages?

Answer 1

You need to add homepage key inside your package.json file like following:

"homepage": "http://{your github name}.github.io/{your repository name}"

Answer 2

We need to modify our package.json file by adding the homepage field. This field is used by React to figure out the root URL in the built HTML file. In it, we will put the URL of our GitHub repository.

{
  "name": "starter-project",
  "homepage": "https://tomerpacific.github.io/starter-project/",
  "version": "0.1.0",
}