Search code examples
reactjsreact-routergithub-pagesparceljs

React: client-side routing with react-router on gh pages

I am having the problem discussed in the React Create App docs about how routers that use the HTML5 pushState history API will fail on static file servers without configuring it to serve index.html everytime. How can I fix this problem while using github pages? Also I'm not using the Create React App or react-scripts

I have tried adding a basename to the BrowserRouter component

<BrowserRouter basename={process.env.PUBLIC_URL}>

Much better explanation of the problem here:

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing

Solution

  • When using react-router-dom with GitHub pages, you'll need to use HashRouter instead of BrowserRouter. It uses the # fragment of the URL to keep the route, circumventing the lack of support for pushState on GH pages.

    (There are some awkward ways to make pushState for GitHub pages, but I don't personally recommend them. Here's a guide for that)