How to make Nav.Link href work with gh-pages - github-pages

Question

I am trying to learn react and after learning the basics, I followed some video online on how to create a webapp. Now everything is looking well on my local. But I want to publish it on github pages and so I installed gh-pages and followed the steps in : https://github.com/gitname/react-gh-pages
So my page is up in https://alvincabayan.github.io/amc-webapp/, only problem is the links are not working.
package.json :
{
"name": "amc-webapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.3.1",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.6",
"react-dom": "^16.8.6",
"react-particles-js": "^2.6.0",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.0",
"styled-components": "^4.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^2.0.1"
},
"homepage": "http://alvincabayan.github.io/amc-webapp"
}
NavigationBar.js:
import React from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import styled from 'styled-components';
const Styles = styled.div`
.navbar {
background-color: #222;
}
a, .navbar-brand, .navbar-nav .nav-link {
color: #bbb;
&:hover {
color: white;
}
}
`;
export const NavigationBar = () => (
<Styles>
<Navbar expand="lg">
<Navbar.Brand href="/">AMC</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Item>
<Nav.Link href="/">Home</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/about">About</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/contact">Contact</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
</Styles >
)
App.js
import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import {Home} from './components/Home';
import {About} from './components/About';
import {Contact} from './components/Contact';
import {NoMatch} from './components/NoMatch';
import {Layout} from './components/Layout';
import {NavigationBar} from './components/NavigationBar';
import {HomeJumbotron} from './components/HomeJumbotron';
function App() {
return (
<React.Fragment>
<Router>
<NavigationBar/>
<HomeJumbotron/>
<Layout>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={NoMatch} />
</Switch>
</Layout>
</Router>
</React.Fragment>
);
}
export default App;
Shouldn't the codes:
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/about">About</Nav.Link>
<Nav.Link href="/contact">Contact</Nav.Link>
point to:
https://alvincabayan.github.io/amc-webapp/
https://alvincabayan.github.io/amc-webapp/about
https://alvincabayan.github.io/amc-webapp/contact
I can see that the corresdponding js are loaded when I inspected the page but trying to show them by dragging them into the browser results in 404.
Please help.
Thanks.

Answer 1

In your routes's path you have to put the name of the repo.
As you can see, right now when you click on a Link the name of the repo disapear.
So you can do for home page :
<Route exact path="amc-webapp/" component={Home} />
I had the same issue, posted on SO without answer. It might not be the best things to do but it works.

Answer 2

React router allows you to set a basename used for all routes. Just use this https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md#basename-string