reactjsreact-router-domgithub-pagesprerender

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


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.


Solution

  • 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>"