Question 261244 in SEO Question posted in
Some basic information to get you started with this can be found here.

Seo – 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    It seems like you’re facing issues with your routes not working after trying to remove prerendering from your React app. There are a few things you can check and try to resolve the issue:

    1. Check the path values in your pathBuilder function: Make sure that the paths returned by the pathBuilder function match the actual paths of your routes. For example, if you want to match /dev, make sure the path returned by pathBuilder('dev') is /dev, not just 'dev'.

    2. Remove unnecessary nesting of routes: In your second approach, where you nested routes within a <Layout> component, make sure that the nested routes have correct paths and are not missing any leading slashes ("/"). For example, if you want to match /dev, make sure the path for that route is pathBuilder('/dev').

    3. Check for conflicting route configurations: Make sure there are no conflicting or overlapping route configurations that might cause unexpected behavior. Ensure that each route has a unique path.

    4. Verify the version compatibility of react-router-dom: Double-check if all versions of packages related to routing (react-router-dom, react-scripts) are compatible with each other and up-to-date.

    5. Inspect browser console errors: Check for any error messages or warnings in your browser’s console when navigating between routes. This can provide valuable information about what might be going wrong.

    By reviewing these aspects and making necessary adjustments, you should be able to troubleshoot and fix issues with your React app’s routing functionality.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search