1. If deploying to GitHub, ensure there is a "homepage" entry in package.json for where you are hosting it in Github.

   Examples:

   User Page

   "homepage": "https://amodhakal.github.io",
   

   Project Page

   "homepage": "https://amodhakal.github.io/portfolio",
   

   Custom Domain Page

   "homepage": "https://amodhakal.com",
   

   Vite: add the project directory as the base.

   vite.config.js

   export default {
     ...
     base: "/portfolio"
   };
   

2. Switch to the HashRouter since GitHub pages doesn't support the tech used by the BrowserRouter.

   index

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { HashRouter } from 'react-router-dom'; // Note 1
   import App from './App';
   import './styles/index.css';
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
       <HashRouter>
         <App />
       </HashRouter>
     </React.StrictMode>
   );
   

   react-router data routers

   import ReactDOM from 'react-dom/client';
   import App from './App';
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
       <App />
     </React.StrictMode>
   );
   

   import {
     createHashRouter,
     RouterProvider
   } from 'react-router-dom'; // Note 1
   // import routed components
   
   const router = createHashRouter([
     ... routes configuration
   ]);
   
   const App = () => {
     ...
   
     return <RouterProvider router={router} />;
   };
   
   export default App;
   

For more details see the create-react-app docs for deploying to GitHub Pages and notes on client-side routing.

¹If using React-Router 7 library, all exports are from react-router instead of react-router-dom. Follow the RR7 installation and setup.

I think you need to change your browserHistory to a hashHistory.. so you can use it with gh... it changes path from /home to #/home

///install git hubpages
$ npm install --save gh-pages

//Add some properties to the app’s package.json file. At the ***top level, add a homepage property. Define its value to be the string http://{username}.github.io/{repo-name}, where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository (my-app) you created in step 3.

//expmle
"homepage": "http://.github.io/",

//in scripts
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
//...
"build": "react-scripts build && cp build/index.html build/404.html", // this will prevent page reloads to give a 404 error
}

// ??? if you are using the Router from react-router-dom then you need to change the Browser router tags to

// u need to wrap the base name in `` for some reason that doesn't work here
< BrowserRouter basename={ /${process.env.PUBLIC_URL}}>
< app/>
< /BrowserRouter>

/// + in the Routes path="/" need to be path=""
< Routes>
< Route path="" element={} />
< /Routes>

**** add the url in the README.md file
// 1. add the changes
$ npm add .
// 2. commit the changes
$ npm commit -m master

// 3. then push the origin
$ npm push origin

/// 4.Last deploy it
$ npm run deploy

Those nested pages are able to access with buttons(I connected component for buttons) but not with typing url to the address bar directly.

GitHub pages isn't fully set up to be a single-page app where all URLs use the same index.html.

A way around this is to use hash routing. Instead of a route like foo.github.io/repo/subpage, it is foo.github.io/repo#/subpage. This works because the actual page is still just /repo, so GitHub loads the correct page, but the hash router will recognize #/subpage and render the correct visuals.

Here's some reading:

• React's
• Vue's hash history mode

If you don't want to use a hash router, I believe you can't use GitHub pages, and will need to use another service like Vercel, which will know how to handle the routes for a single-page app.

(I use Vue, not React, but the same concepts should apply)

As per deployment docs at https://create-react-app.dev/, for GH pages:

GitHub Pages doesn’t support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42, where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42.

If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:

• You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj) Read more about different history implementations of react-router.

Change your routing from:

    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <Route render = {({ location }) => (
         <Layout location = { location }>
             <Switch location = { location }>
                <Route exact path = '/' component = { Home } />
                <Route exact path = '/buttons/' component = { Buttons } />
                <Route component = { NotFound }/>
              </Switch>
           </Layout>
       )} />
    </BrowserRouter>

To:

import { HashRouter, Route, Link } from "react-router-dom";

...


    <HashRouter basename={process.env.PUBLIC_URL}>
      <Route render = {({ location }) => (
         <Layout location = { location }>
             <Switch location = { location }>
                <Route exact path = '/' component = { Home } />
                <Route exact path = '/buttons/' component = { Buttons } />
                <Route component = { NotFound }/>
              </Switch>
           </Layout>
       )} />
    </HashRouter>
...

• Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.

github pages don't work well for single page application but there is hack around it. add this script to your index.html in public folder

  <script type="text/javascript">
    // Single Page Apps for GitHub Pages
    // https://github.com/rafrex/spa-github-pages
    // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
    // ----------------------------------------------------------------------
    // This script checks to see if a redirect is present in the query string
    // and converts it back into the correct url and adds it to the
    // browser's history using window.history.replaceState(...),
    // which won't cause the browser to attempt to load the new url.
    // When the single page app is loaded further down in this file,
    // the correct url will be waiting in the browser's history for
    // the single page app to route accordingly.
    (function (l) {
      if (l.search) {
        var q = {};
        l.search.slice(1).split('&').forEach(function (v) {
          var a = v.split('=');
          q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
        });
        if (q.p !== undefined) {
          window.history.replaceState(null, null,
            l.pathname.slice(0, -1) + (q.p || '') +
            (q.q ? ('?' + q.q) : '') +
            l.hash
          );
        }
      }
    }(window.location))
  </script>

and create a custom 404.html in public folder

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Single Page Apps for GitHub Pages</title>
    <script type="text/javascript">
        // Single Page Apps for GitHub Pages
        // https://github.com/rafrex/spa-github-pages
        // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
        // ----------------------------------------------------------------------
        // This script takes the current url and converts the path and query
        // string into just a query string, and then redirects the browser
        // to the new url with only a query string and hash fragment,
        // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
        // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
        // Note: this 404.html file must be at least 512 bytes for it to work
        // with Internet Explorer (it is currently > 512 bytes)

        // If you're creating a Project Pages site and NOT using a custom domain,
        // then set segmentCount to 1 (enterprise users may need to set it to > 1).
        // This way the code will only replace the route part of the path, and not
        // the real directory in which the app resides, for example:
        // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
        // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
        // Otherwise, leave segmentCount as 0.
        var segmentCount = 0;

        var l = window.location;
        l.replace(
            l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
            l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
            l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
            (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
            l.hash
        );
    </script>
</head>

<body>
</body>

</html>

what this does is that we when refresh the page github actually reaches the server for that specific route but since it's SPA the file won't be available so it send the 404.html page which gets the pathname from the file and calls the index.html page and pastes the pathname there.