React-Router Broken after changing from hashLocation to browserLocation - reactjs

Question

I can't figure out why after changing from hashLocation to now using browserLocation that after I am able to click the link below to navigate to (render the interview) the interview, but now for some reason once I'm at the interview (I am redirected to the interview component that renders), if I refresh my browser and try to hit interviews/companies/:companyId again when I'm on that same page already, it instead hits my page not found in my express.js implementation.
So again, summarizing this: first time around when I click the link from my main landing page which is where that <Link> resides..when i first load the website, when I click that...it's able to hit interviews/companies/:companyId and render the interview component. All is good, until after you try to hit refresh, it bombs out. Not sure why
server.js
'use strict';
var express = require('express'),
app = module.exports = express(),
port = process.env.PORT || 3000,
path = require('path');
app.use(express.static('client'));
app.use(function (req, res) {
res.send('Sorry, Page Not Found');
});
console.log("port we're about to run on: " + port);
app.listen(port, function () {
console.log('Ready on port %d', port);
}).on('error', function (err) {
console.log(err);
});
On my main landing page, I click a link that's defined like this in one of my React Components:
<Link to={`/interviews/companies/${company.id}`}
params={{id: company.id}}
className="ft-company"
ref="link">
{company.name}
</Link>
which initially works fine. I am sent to /interviews/companies/6 for example and it renders my interview component just fine
Here's my route definitions:
const App = Component({
render() {
return (
<Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)}>
<Route path="/">
<IndexRoute component={HomePage}/>
<Route name="interview" path="interviews/companies/:companyId" component={Interview}/>
</Route>
<Route path="/" component={Container}></Route>
</Router>
);
}
})

Answer 1

You need to add entry in your webserver to serve the index.html for every get html request .
Import the library:
var history = require('connect-history-api-fallback');
Now you only need to add the middleware to your application like so:
var connect = require('connect');
var app = connect()
.use(history())
.listen(3000);
Of course you can also use this piece of middleware with express:
var express = require('express');
var app = express();
app.use(history());
https://github.com/bripkens/connect-history-api-fallback