React Router Deep Linking

- 1 answer

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,, and I have no problem navigating to these pages if I start at the root of the site ( and clicking on 'Work', for example). The problem I am running into is deep linking (manually entering or refreshing the page on 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 path="*" component={NotFound} />

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


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 without having the html file, it will probably give you a 404.

If you're using webpack, try using