Ok, so I’ve made a SPA using React and React-Router and have pushed it to github pages, but none of the routes I have written work when I refresh or click back in my browser. I had the same problem when I was serving the page locally, but then followed along to this SO answer and made a server.js file which provided a redirect to my static HTML page at each route. Here is what the file looks like:
"use strict"; let express = require('express'); let path = require('path'); let app = express(); app.use(express.static('public')); app.get('/contact', function(req, res){ res.sendFile('public/index.html', { root: __dirname }); }) app.get('/about', function(req, res){ res.sendFile('public/index.html', { root: __dirname }); }) app.get('*', function(req, res){ res.sendFile('public/index.html', { root: __dirname }); }) app.listen(8080, function(){ console.log('Listening on port 8080!') })
Now, my problem is that when I push the project to github pages all of that logic is ignored, github’s routing takes over and I have the same problem of not being able to refresh or go straight to /contact
or /about
. I know it seems like an obvious problem to run into, since github pages is designed to only host static sites, but I’ve seen people hinting towards other ways of creating a static page for each route, such as the answer in this reddit post, but I have no idea how to do that.
I should also mention that because I already have a site at user-name.github.io
, so this site is being hosted at user-name.github.io/projects
, making that my /
route. I have no idea if this makes any difference, I just thought I should mention it.
I think I’ve pretty much exhausted every option to try and successfully host this on gh-pages and I know there are projects like Single Page Apps for GitHub Pages to try and fix this issue but, I just wanted to see if anyone out there has had any luck doing this before resorting to that.
FYI, here is my app.js (containing routing logic):
import React, {Component} from 'react'; import {render} from 'react-dom'; import {Router, Route, browserHistory, IndexRoute} from 'react-router'; //Import custom components import About from '../components/about.js'; import Contact from '../components/contact.js'; import Sidebar from '../components/sidebar.js'; import Imagelist from '../components/image-list.js'; render( <Router history={browserHistory}> <Route path="/" component={Sidebar}> <IndexRoute component={Imagelist}/> <Route path="/about" component={About}/> <Route path="/contact" component={Contact}/> </Route> </Router>, document.getElementById('content') );
Any help with this would be much appreciated & happy to include more code if helpful.
Advertisement
Answer
I think you need to change your browserHistory to a hashHistory.. so you can use it with gh… it changes path from /home to #/home