1

Lot of questions have been asked on the same topic like this and this, but I could not solve my problem.

The react-app works good without reload, but when reloaded or manual refresh is done on an nested react-router URL, it breaks.

Here is my routes:

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path='/' component={App}>
        <IndexRoute component={GoogleLoginComponent} />
        <Route path='home' component={HomeComponent} onEnter={authRequired.bind(this, store)}>
        </Route>
        <Route path='register' component={RegisterComponent} onEnter={authRequired.bind(this, store)}>
        </Route>
        <Route path='eventCreated/eventId=:eventId' component={EventShareComponent}>
        </Route>
        <Route path='event/eventId=:eventId' component={EventPageComponent}>
        </Route>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('app')
);

When I reload on http://localhost:3000/home or http://localhost:3000/register, the app reloads smoothly.

But when I try to reload http://localhost:3000/eventCreated/eventId=1234 or http://localhost:3000/event/eventId=1234, it breaks and gives the following in console.

web console error

I think the nested Urls are not identified by web-pack and I have changed the server.js file like this:

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: {
      index: 'index.html',
      rewrites: [
        { from: /\/event/, to: 'index.html'}
      ]
    }
}).listen(PORT, function(err, result) {
    if (err) console.log(err);
    console.log('Listening at port '+ PORT);
});

I have rewritten the nested urls to redirect to index.html, but still could not figure out what is the error. I have aslo tried making historyApiFallback to true.

Community
  • 1
  • 1
Lakshman Diwaakar
  • 7,207
  • 6
  • 47
  • 81
  • 1
    I think you should be using history={browserHistory} with historyApiFallback and also you should visit `http://localhost:3000/eventCreated?eventId=1234 ` instead of `http://localhost:3000/eventCreated/eventId=1234` since eventId is a query parameter. Yours is not a valid url – Shubham Khatri Nov 11 '16 at 03:19
  • @ShubhamKhatri Thanks for the additional information, I will change that. Regarding the BrowserHistory, I have added browserHistory to History props in Router. Here is the code **const history = syncHistoryWithStore(browserHistory, store);** and I have added that history const to the history prop in Router. – Lakshman Diwaakar Nov 11 '16 at 03:25
  • 1
    You also need to change your route path `` to ``. Let me know if it works for you – Shubham Khatri Nov 11 '16 at 03:54
  • @ShubhamKhatri I tried changing to **eventCreated/:eventId**, but I get the same error. Do you want me to create child routes for eventId ? – Lakshman Diwaakar Nov 14 '16 at 08:03
  • If eventId is a query parameter then changing the router path won't work. Also let me know how different eventId affect your rendering – Shubham Khatri Nov 14 '16 at 09:40
  • @ShubhamKhatri I need to keep **eventId** explicitly as **event/:eventId**. Once the browser hits the URL with eventId, this will fetch the information about eventID from dynamoDB, So I want my eventId to be explicit. Having said, I dont understand How this affects the webpack config. Everything runs smoothly, but when you hit reload on a nested react- route, gives me an error as I showed in the question. But, I have deployed the same app in S3 and have written the redirection rules in such that when 404 hits it loads the index.html.works perfectly. I want to know how this affects the webpack – Lakshman Diwaakar Nov 15 '16 at 02:24

0 Answers0