Deploying Reactjs website on github pages with routing results in 404 error on refresh

Question

I've created a ReactJS webpage with multiple routes using BrowserRouter and deployed in via GitHub pages with its own domain. The website works perfectly as intended, however, when I refresh the page when I am on a route other than the home '/' page I receive a error 404 error from Github. For example, my domain is 'kigaru-sushi.com/'. When I try to refresh or type the url 'kigaru-sushi.com/sushi', then I get on this page:

https://i.sstatic.net/VxgIU.png

When I simulate this locally, it seems to work fine. However, I seem to be running into this issue when I run the script 'npm run deploy' and view it online and refresh the page.

Here is the beginning of my package.json:

{
  "name": "kigaru-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://kigaru-sushi.com/",
  "dependencies": {
    "@material-ui/core": "^4.3.0",
    "@material-ui/styles": "^4.3.0",
    "gh-pages": "^2.0.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-pose": "^4.0.8",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^2.1.8",
    "redux": "^4.0.4"
  }
...

and my routes in App.js:

render() {
    return (
      <BrowserRouter>
        <div>
          {this.state.isDesktop ? <Navbar /> : <Mobilenav openDrawer={this.state.openDrawer} closeDrawer={() => this.setState({openDrawer: false})}/>}
          <Route exact path={process.env.PUBLIC_URL + '/'} render={ () => (<Home
            handleListClick={() => this.setState({openDrawer: true})}
          />)} />
          <Route
            path="/sushi"
            component={() => (
              <Sushi
                nigiri={sushi.nigiri}
                gunkan={sushi.gunkan}
                makirolls={sushi.makirolls}
                desktop={this.state.isDesktop}
              />
            )}
          />
          <Route
            path="/appetizers"
            render={() => <Appetizers appetizers={appetizers} />}
          />
          <Route
            path="/maindish"
            render={() => (
              <Maindish
                japaneseCurry={maindish.japaneseCurry}
                noodles={maindish.noodles}
                donburi={maindish.donburi}
              />
            )}
          />
          <Route
            path="/drinks"
            render={() => (
              <Drinks
                beer={drinks.beer}
                chuHi={drinks.chuHi}
                softDrinks={drinks.softDrinks}
                dessert={drinks.dessert}
              />
            )}
          />
          <Route
            path="/contact"
            render={() => (
              <Contact
              />
            )}
          />
          <Pop pose={this.state.showDialog ? "static" : "grow"}>
            <Fab
              onClick={this.handleClickButton}
              style={{
                position: "fixed",
                bottom: "0",
                right: "0",
                zIndex: 2,
                marginRight: "5px",
                marginBottom: "10px"
              }}
              size={this.state.isDesktop ? "large" : "small"}
            >
              <Icon
                style={
                  this.state.isDesktop
                    ? { fontSize: "40px" }
                    : { fontSize: "30px" }
                }
                color={"error"}
              >
                favorite_border
              </Icon>
            </Fab>
          </Pop>
          <Shopping open={this.state.showDialog} close={this.handleClose} />
          <Footer />
        </div>
      </BrowserRouter>
    );

I have tried removing proccess.env.PUBLIC_URL and adding a basename and neither have worked and I am very lost. I also tried my best at using HashRouter but that only seemed to give me a blank page when I deployed it. Any help would be very appreciated!

Rosenstein

#46056914 – Falconet

It's a common issue with SPA routing – Falconet

Answer 1

Github pages doesn't play well with client side routing, especially Browser Router.

Create React App documentation has a few solutions for this.

Doubletree

Thank you!! The documentation really helped. I went with the 404 redirect method and it worked! – Rosenstein

for me switching to HashRouter is the easy way to sove the problem – Attainture

Answer 2

Another solution I accidentally found (not HashRouter)

For example, url: username.github.io/gh-pages-url/ in Route path put /gh-pages-url instead of root /, like th:

ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/gh-pages-url" component={App} exact />
      <Route path='/gh-pages-url/contacts' component={Contacts} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

Topdrawer

Answer 3

GitHub pages doesn't support client routing but you can use HashRouter instead of BrowserRouter

import { HashRouter as Router} from "react-router-dom";

Gasteropod