React Router deep linking

Question

This is my first time using React and React Router, and I am running into some deep linking issues. I've build a simple SPA, and with the help of React Router, I can navigate to mysite.com/work, mysite.com/about, and mysite.com/work/:projectid. I have no problem navigating to these pages if I start at the root of the site (mysite.com and clicking on 'Work', for example). The problem I am running into is deep linking (manually entering mysite.com/about or refreshing the page on mysite.com/about). This all works on my localhost but not on the hosted site (which, btw, is hosted on GitHub pages).

Is this because I am using GitHub pages to host my site? Or is this an issue with React Router?

Here is part of main.js:

var routes = (
    <Router history={history}>
        <Route path="/" component={App}>
            <IndexRoute component={Work} />
            <Route path="/work" component={Work} />
            <Route path="/work/:id" component={ProjectDetail} />
            <Route path="/about" component={About} />
        </Route>
        <Route path="*" component={NotFound} />
    </Router>
);

ReactDOM.render(routes, document.getElementById('main'));

Answer 1

You can traverse the site from your root since the routing is all handled by react-router which loaded from your root site's js files.

There is no html file located in /about/index.html. gh-pages hosts static sites, and if you go to mysite.com/about without having the html file, it will probably give you a 404.

If you're using webpack, try using https://github.com/markdalgleish/static-site-generator-webpack-plugin.