React Router with GitHub Pages
Tags: codenewbie, react, github, git
Published: 2020-01-11 18:38:39

React Router has given me some interesting glitches when using with with GH Pages. This will be a write up on my fails and the final way I got my homepage to render with React Router on GitHub Pages. Feel free to skip to the end to see what worked.

# How to set up React Router Normally
Under a normal site you will set up the React Routes by install the npm for routes via `npm install react-router-dom`. This will give you the ability to import the proper tags by placing "import { BrowserRouter as Router, Route, NavLink} from "react-router-dom";". There are a few more tags that can be added such as Switch, Link, useRouteMatch, and useParams, but I used Route and NavLink. (I'm sure there are a few more but I am not aware of them.) (1)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qht24t15qngurs1nofmt.png)

# Routes Look Like
Once you have the import statement with the tags you like you can implement the routes tags in your project. For my I placed them in my Header file that will be the navigation of my app like so.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0bj9uzkrey2uwnbhx9ig.png)

# The Issue...
The issue is that when you use GH Pages that it has a specific address, your gh name + github.io. When you use your routes like you see mine are set it assumes that it is 'caffiendkitten.github.io/blogs" and not "caffiendkitten.github.io/myportfolio/blogs". The same happens with each link.

# First Attempt The Fix
My first attempt fix to this is is to make both the NavLink and the Route Path account for the "myportfolio/blogs" but this produces "myportfolio/myportfolio/blogs" and breaks everything. =(

# Second Attempt to Fix
My second attempt was to switch the NavLink and the Route Path from its original "/" or "/name" to seeing if one or the other would work with "myportfolio/name". 
Unfortunately, this also produced a lot of "myportfolio/myportfolio/myportfolio/myportfolio/myportfolio//" on things, which isn't super helpful...

# Third Attempt to Fix
This time I focused on the home link itself instead of any other.
I did this by editing both the NavLink and the Route Path separately and added the "myportfolio" to the path so it would be "myportfolio/. This produced... nothing... OK, there was some stuff from the Header but not the home page content that is there when I am on my localhost...
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cro7f03hmrebim0seacj.png)
The same thing happens if I have one or the other, NavLink or Route Path, with or without the "myportfolio/", Nothing shows up.

# Fourth Attempt to Fix
Now let's try something different as this obviously isn't getting anywhere.
Now I'm going to try the componentDidMount and see if adding the <Home /> element to it will get it to render.![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/47lu0gq2ytsru5422s7j.png)
Which caused a LOT of errors.... and looks like this idea wont work.. ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1seawu41d7p7s5gsekxa.png)

# Fifth Attempt to Fix
Another new thing to try is to create a const variable for the <Home /> component and see if it will render it like this.![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nfz7f99e8ylubloe15e3.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3eassyfk0pdzhqrpae6o.png)
Which produced... more errors.. ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/y98ocy4n7spxb3qr6tns.png)
Hmm, I seem to have put it in the wrong location so I moved it up and out right below my imports which... did compile and looks like this.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a43313xfkw7fa3yku1ni.png)
So, it DID work... sort of. As you can see, the content is stacking. It did render my landing page BUT it stacks any content below it, which is not what I want. 
Is there a way to utilize this landing page variable to display the content on load?

# Sixth Attempt to Fix
Before I played with the variable I had an idea to try rendering the page without the "exact" tag.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/aqy80yz5sguwa1xr793a.png)
This again stacked the layout... 


# Seventh Attempt to Fix
I changed my NavLink from "activeClassName="chosen"" to "exact".![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rso15c4indkevw42uxxx.png)
This produced no change unfortunately... The site has no landing page but at least things are not stacking now. 

# Eighth Attempt to Fix
I tried re-arranging the Route Paths and placed the home link at the bottom. I don't know but I figured it couldn't hurt to try as this is how my last project looks. ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p7gre0vp8dz5b90262es.png)
No changes here. Darn... Onto plan "I"...

# Ninth Attempt to Fix - Switch to the Rescue! 
This is actually my like, 11th try but I decided I didn't want to bore people with all the attempts so here is where I tried a Switch and got it to work. Huzzah!
I added a Switch to my Router as well as a default component to get my home page to load. This method is supposed to be used as a case for if the components don't load properly but I found that I was able to use it for making my Home page show up like I wanted. (4)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4pndifc78rliihp3mn8q.png)
As you can see I have a Component for "notfount" (cause my spelling is awesome) and I have a Switch case with a `component={Home}` as the last case in the Switch Tag. This allows for a default case as well as still having the allowance of the "/" to have a path for the Home button on my navigation. And Poof. My home page loads and other pages don't stack. Finally.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jaudgbrzriq7tkxyvjnc.png)


# What's Next?
Now that I got my home page to load I need my path to display correctly so that if someone refreshes the page that they won't get a 404 page. Or maybe I need a "not found" page that will redirect people to the home page or something... ??? We shall see.



<hr>

Happy Hacking
![](https://media.giphy.com/media/l3vRmVv5P01I5NDAA/giphy.gif)

#### References 
1. https://reacttraining.com/react-router/web/guides/quick-start
2. https://www.npmjs.com/package/react-router
3. https://itnext.io/react-router-how-to-add-child-routes-62e23d1a0c5e
4. https://www.javatpoint.com/react-router
5. https://github.com/ReactTraining/react-router/issues/6201
6. https://stackoverflow.com/questions/47338077/react-router-v4-navlink-vs-link-benefits
7. https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md
8. https://medium.com/swlh/using-react-router-navlink-to-specify-the-active-element-in-a-navigation-bar-38700ffd4900
9. https://www.codementor.io/@packt/using-the-link-and-navlink-components-to-navigate-to-a-route-rieqipp42


###### Please Note that I am still learning. If something that I have stated is incorrect please let me know. I would love to learn more about what I may not understand fully.