props.match.params.id works when I am testing but does not when I deploy in github with gh-pages

Question

I am using a Route like <Route path="/:boardID" component={Board} /> and I am using the boardID from Board component taking it from this.props.match.params.boardID . It works fine when I test it with npm start . But it doesn't work when I deploy it to github pages with npm run deploy .

I understand that when I test, the url is localhost:3000/boardID-00 and in case of github pages deployment, it becomes username.github.io/projectname/boardID-00 which causes the problem. Is there a way so that it works for both cases? So, that I can fetch boardID in both cases?

Answer 1

Take a look at this answer React Router v4 baseName and custom history

Basically you can add a basename prop to your router depending on your environment

<BrowserRouter basename="/projectname">
  <App/>
</BrowserRouter>

Answer 2

I struggled all day with this earlier this week.

If you're using HashRouter as your Router, your routes should work after being deployed to GitHub Pages.

If you're using BrowserRouter as your Router, GitHub Pages is not designed to work with client-side routing without the help of a # . I tried ludwiguer's suggestion, and it didn't work for me, although maybe it will work for others.

This article helped me out, and I ended up using Firebase Hosting, making sure to answer "yes" in the initialization process when the CLI asks Configure as a single-page app (rewrite all urls to /index.html)?

Here is a GitHub issue thread you might want to take a gander at ( Gh-pages deployment problems with react-router ), but since I didn't want to use HashRouter , the only thing that worked for me was to deploy with something other than GitHub pages.