Introduction
Everyone must have using the GitHub pages to deploy their React project to the internet. And of course, building a react app with the react-router library is a must when you are building a multi-page app. However, you will notice some problems when deploying the react-router app to the GitHub pages.
This view will be displayed when we deploy react router app to GitHub pages :
The solution is to change our path of the route in our app:
import './App.css';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'
import Homepage from './components/Homepage';
import SecondPage from './components/SecondPage';
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route path='/' exact component={Homepage}/>
<Route path='/secondpage' exact component={SecondPage}/>
</Switch>
</Router>
</div>
);
}
export default App;
Notice the route tag , now we gonna change the path.
the formula is by putting your app name (according to your repository name) at the beginning of the path (after / ) for the main page and other pages, just add the additional page behind the home path.
Formula : '/{your-app-name}/{route to another path}'
Like this :
let say my app name is problem-showcase
import './App.css';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'
import Homepage from './components/Homepage';
import SecondPage from './components/SecondPage';
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route path='/problem-showcase' exact component={Homepage}/>
<Route path='/problem-showcase/secondpage' exact component={SecondPage}/>
</Switch>
</Router>
</div>
);
}
export default App;
See how I change the path of the route?
The same thing goes when you use Link or useHistory in your app
import React from 'react'
import {useHistory} from 'react-router-dom'
const Homepage = () => {
let history = useHistory()
return (
<div>
<h1>Homepage</h1>
<button onClick={()=>history.push('/secondpage')}>Click here</button>
</div>
)
}
export default Homepage
note that I used useHistory from react-router-dom to navigate to the second page
Since we have to change the path for the second page, we also need to change the path to the second page when using useHistory
Like this:
import React from 'react'
import {useHistory} from 'react-router-dom'
const Homepage = () => {
let history = useHistory()
return (
<div>
<h1>Homepage</h1>
<button
onClick={()=>history.push('/problem-showcase/secondpage')}>
Click here
</button>
</div>
)
}
export default Homepage
So, just note that we need to change the path to our route in the entire app.
So now we can deploy our react-router app to Github pages. You can refer to this GitHub repository for the deployment.
Just make sure your homepage URL (project repository name) in package.json is the same as the homepage path.
"homepage": "http://{your github name}.github.io/{your repository name}"
<Route path='/{your repository name}' exact component={Homepage}/>
Example:
"homepage": "http://janjib.github.io/problem-showcase"
<Route path='/problem-showcase' exact component={Homepage}/>
Done.
This is the link to my Github repository:
Click here !
Top comments (19)
I was looking for a solution to this problem.
Unfortunately it does not work and I can't find the problem. I think all the routing in general is correct since it works fine when running locally, but i can't get it to work on gh-pages.
Could You take a look?
github.com/Dilinar/work_management...
I guess the problem was solved right. I tried to open your github pages and it works just fine
Hi again!
While the information provided here was useful to fix general routing problems, fixing the 404 error on refreshing a sub-page is a different issue.
Gh-pages does not support single page applications, so a workaround is needed. In order to fix the issue, the project requires a custom 404.html file that contains a redirection script.
In other words, instead of allowing gh-pages to open the default 404 error page, we need to have our own that instead of opening, uses a script that takes the previous address and opens it's again.
At least that's how my junior brain understands it. In any case, I've used the steps described here:
github.com/rafgraph/spa-github-pages
This is what helped me
ricocode.com
i was not able to understand what it does. tried following the tutorial but not understanding. Is there any tutorial or video?
Oh, I've forgotten to link the deployment.
dilinar.github.io/work_management_...
While it does load the home page properly and going to any subpage via the buttons works, trying to refresh any of the subpages results in a 404 error. Also, going back to the home page loads the error page.
I just simply wrapped all my routes inside the HashRouter instead of BrowserRouter and it works fine
Yeah, your method is the simplest one actually. However, it doesn't work with my program so that is why I figure out other ways
In this moment, this solution, react router v6 is not working :(
I just tried this method by using react router v6 and its still working. Maybe you should recheck your codes that involve react router v6
Hi ,
I think i made all possible changes but still my react routing application isn't working on github, Could anyone please help me to solve this issue?
Link to my git repository: github.com/CodeWithChirag14/QuickN...
Link to my react application: codewithchirag14.github.io/QuickNe...
Thanks for the post. It helped me figure out the links for my app on gh-pages and I got it to work
Hey, event after changing the app name and changing the routes, the gh page is still not routing perfectlly
How can we communicate ? I have applied this practice and it always worked. Maybe you can share your code ?
Thanks, it has resolved my problem
Could you get back to this article and update it, please? Your current repository is not displaying and this solution needs an update
Thank you! After prepending the routes with project's repo name it worked.
Thank you,
Your post saved me alot.
It works now
ibrahemnaser.github.io/Furnite/
I am still having this issue even after adding a 404.html and the fix above