Hello guys ,
In this article we will explain you how to deploy react app with react routers on github pages.
Interesting thing about react-router is, it won’t work directly on github pages, so this article is published.
Initially we will create a react app with CRA tool by facebook and deploy it on github pages.
Follow below article to create react app and deploy it on github .(click on the post here)
Now lets see the result.
Here Instead of loading home page ,it shows blank.
This is because a fresh page load for a url like ‘test_repository/’, where ‘/’ is a frontend route, the GitHub Pages server returns null because it knows nothing of ‘/’
Let’s solve blank page problem
We need to add basename to router as shown below and point it to repository name
<Router basename="/test_repository"> //add basename
<Switch>
<Route path='/' exact component={Home} />
<Route path='/about' component={About} />
<Route path='/services' component={Services} />
<Route path='/contact-us' component={Contact} />
</Switch>
</Router>Now let’s check the result.
another problem is if you try other URL like ‘/about’ this will show 404 page error.
Let’s solve 404 page error:
Add below two codes in your react app ,
1.Create 404.html under public folder:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single Page Apps for GitHub Pages</title>
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script takes the current url and converts the path and query
// string into just a query string, and then redirects the browser
// to the new url with only a query string and hash fragment,
// e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
// https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
// Note: this 404.html file must be at least 512 bytes for it to work
// with Internet Explorer (it is currently > 512 bytes)
// If you're creating a Project Pages site and NOT using a custom domain,
// then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
// This way the code will only replace the route part of the path, and not
// the real directory in which the app resides, for example:
// https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
// https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
// Otherwise, leave pathSegmentsToKeep as 0.
var pathSegmentsToKeep = 1;
var l = window.location;
l.replace(
l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
(l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
l.hash
);
</script>
</head>
<body>
</body>
</html>set pathSegmentsToKeep=0 if your using custom domain for github pages.
Now, add below script in index.html in the head section.
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function(l) {
if (l.search[1] === '/' ) {
var decoded = l.search.slice(1).split('&').map(function(s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
</script>Now Everything works fine…
Above code snippets are basically used to explain git where to redirect on particular URL.
Note:Above code snippets belong to https://github.com/rafgraph/spa-github-pages.
Hope this article helped you guys!!!
Drop a comment if it worked for u!!!
janjibDEV
Posted on Aug 2, 2021
• Updated on Aug 13, 2021
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;
Enter fullscreen mode
Exit fullscreen mode
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;
Enter fullscreen mode
Exit fullscreen mode
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
Enter fullscreen mode
Exit fullscreen mode
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
Enter fullscreen mode
Exit fullscreen mode
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.
Deploy react app to gh-pages
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}/>
Enter fullscreen mode
Exit fullscreen mode
Example:
"homepage": "http://janjib.github.io/problem-showcase"
<Route path='/problem-showcase' exact component={Homepage}/>
Enter fullscreen mode
Exit fullscreen mode
Done.
This is the link to my Github repository:
Click here !
Tired of sifting through your feed?
You can change your feed and see more relevant posts by adding a rating to different tags on DEV. Head here to adjust your weights.
Hi friends !
I’ve been trying to deploy a simple react website on gh-pages. The home page works really fine ! But when i go to other pages, i always get ‘404: hot found’.
I only got 2 pages: main and mobile. Mobile is the mobile version.
Here is my app.js:
import './App.css';
import { Routes, Route, Link, BrowserRouter, HashRouter } from "react-router-dom";
import { HomePage } from './HomePage';
import { Mobile } from './Mobile';
function App() {
return (
<div className='App'>
<Routes>
<Route path='/pegainfo' element={<HomePage/>} />
<Route path='/pegainfo/mobile' element={<Mobile/>} />
</Routes>
</div>
);
}
export default App;
Here is my index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, HashRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter basemname={`/${process.env.PUBLIC_URL}`}><App /></BrowserRouter>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Someone has a clue ?
Thanks a lot !!