CODEWITHSUNDEEP
reactjsexpressherokureact-routerreact-redux
user992731
user992731

Reputation: 3520

Route not found on refresh using react router and express on heroku

When serving my app locally everything is loading and working as normal on refresh. When I deploy to Heroku, everything is working normal when clicking around to different links.

The issue I keep running into is when I get to a route. IE: /aboutus and refresh I get a "not found". When I navigate there it all checks out fine. Any thoughts?

I am using react router redux also.

package.json

....
"express": "^4.14.1",
"react-redux": "^5.0.3",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",

server.js

app.use(express.static(path.join(__dirname, '/../dist')));
app.use('/data', express.static(__dirname + '/data'));
app.use(express.static(__dirname))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

Index.js

...
const router = (
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="/aboutus" component={About} />
        <Route path="/list" component={List}  />
      </Route>
    </Router>
  </Provider>
)

render(router, document.getElementById('main'));

Upvotes: 0

Views: 1359

Answers (1)

user992731
user992731

Reputation: 3520

I ended up solving this by adjusting my Express config to the following if anyone else runs into this problem:

//res.sendFile(path.join(__dirname, 'index.html'));
res.sendFile(path.resolve(__dirname + '/../dist/index.html'));

Upvotes: 2

Related Questions