How to implement multiple subroutes with a reactJS app hosted on GitHub Pages?

Question

I use reactJS for a multiple routes app.

Historically, I hosted my app on Netlify, then I implement a prerendering with react-spa-prerender in order to improve SEO.

Recently I migrate it towards GitHub pages, keeping this prerendering effective.

Then, I try to get rid of this prerendering and my subpages were not served anymore.

My App.js returns this :

return (
        <>
            <div className="App" id="capture">
                <AppContext.Provider value={appContext} > 
                    <div className={`${theme}`}>
                        <BrowserRouter>
                             <Routes>
                                <Route exact path={pathBuilder('/')} element={<CurriculumVitae domain={EnumDomain.GENERIC}  />} />
                                <Route path={pathBuilder('/dev')} element={<CurriculumVitae domain={EnumDomain.DEV} />} />
                                <Route path={pathBuilder('/maths')} element={<CurriculumVitae domain={EnumDomain.MATHS} />} />
                            </Routes> 
                        </BrowserRouter>
                    </div> 
                </AppContext.Provider>
            </div>
        </>
);

The method pathBuilder(path) return this :

const pathBuilder = (path) => {
    return `${process.env.NODE_ENV === 'production' ? '/cv' : ""}${path}`;
}

This is due to the fact that the app is served on GitHub Pages at "https://[githubname].github.io/cv", and the base domain page is "https://[githubname].github.io", I have to add the suffix '/cv' and then add the good suffix corresponding to the page ('/', '/dev', '/maths').

Here are my dependencies in package.json :

    "react-dom": "^18.2.0",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "react-spa-prerender": "^1.0.14",

Can somebody help me with this problem ?

Thank you in advance.

Answer 1

Thanks to the post suggested by @Drew Reese, effectively it was due of the fact that I migrate towards GitHub Pages, which not supports BrowserRouter anymore.

I share the code that works for me.

I replace this :

<BrowserRouter>
     <Routes>
         <Route exact path={'/'} element={<CurriculumVitae domain={EnumDomain.GENERIC}/>} />
         <Route path={'/dev'} element={<CurriculumVitae domain={EnumDomain.DEV} />} />
         <Route path={'/maths'} element={<CurriculumVitae domain={EnumDomain.MATHS} />} />
     </Routes> 
</BrowserRouter>

by that :

<RouterProvider router={router} />

You only have to create the router before, with the method createHashRouter() :

import { createHashRouter, RouterProvider } from 'react-router-dom';


const router = createHashRouter(
     [
        {
            path: "/",
            errorElement: <Error />,
            children : [
                {
                    path: "/",
                    element: <CurriculumVitae domain={EnumDomain.GENERIC} />
                 },
                 {
                     path: "dev",
                     element: <CurriculumVitae domain={EnumDomain.DEV} />
                 },
                 {
                     path: "maths",
                     element: <CurriculumVitae domain={EnumDomain.MATHS} />
                 }
            ]
        }
    ]
);

Now I have three routes :

1. the home hosted at "https://<github-name>.github.io/<git-repo>"
2. two subroutes hosted at "https://<github-name>.github.io/<git-repo>/#/<subroute>"