Problem with react-router app and Github Pages (Solved !)
Tags: react, github, programming
Published: 2021-08-02 10:36:29

#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 :



![React app does not show up when deployed with Github pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1gvx6jdu8hwb3tbvpwl.png)

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.


[Deploy react app to gh-pages](https://github.com/gitname/react-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}/>
```

######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 !](https://github.com/janjib/problem-showcase)