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.stack.imgur.com/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!
An alternative way to handle 404 page not found in React router is to redirect the user to a different page when they try to go to a page that doesn't exist. Copied! In the example, instead of rendering a PageNotFound component, we redirect the user to / if they go to a route that doesn't exist. Copied!
Switch to the HashRouter since GitHub pages doesn't support the tech used by the BrowserRouter . import React from 'react'; import ReactDOM from 'react-dom/client'; import { HashRouter } from 'react-router-dom' import App from './App'; import './styles/index.
react-router-dom allows us to navigate through different pages on our app with/without refreshing the entire component. By default, BrowserRouter in react-router-dom will not refresh the entire page.
Github pages doesn't play well with client side routing, especially Browser Router.
Create React App documentation has a few solutions for this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With