Using react router breaks the app

[rukshn]

Hi, I'm using react router together with this yeoman generator. So when using a react router with multiple nester routers such as this,

<Route path="/story/:sid" component={StoryComponent} />

I get the following error when a URL such as this '/story/1' is loaded on the browser.

http://localhost:8000/story/assets/app.js 404 (Not Found)

I guess the problem is here,

Changing this at index.html

<script type="text/javascript" src="./assets/app.js"></script>

To

<script type="text/javascript" src="/assets/app.js"></script>

Seems to fix the problem. So what should we do about this?

[weblogixx]

Hi @rukshn,

thank you for your feedback. This is a known problem. We changed the url to relative to make the output work correctly in subdirectories. Unfortunately this clashes with react router. We will revert the setting back to absolute mode (as you have suggested, too) in a next patch version.

[rukshn]

Hi @weblogixx if it's a known issue then it's fine I guess. Another thing I noted is that it also breaks hot reloading. Getting the following warning at console.

[HMR] Cannot find update. Need to do a full reload!
only-dev-server.js?2f87:28 
[HMR] (Probably because of restarting the webpack-dev-server)

[weblogixx]

Hi @rukshn,

this is related to the same error :(. Please remove the "." in cfg/base.js:

module.exports = {
  additionalPaths: additionalPaths,
  port: defaultSettings.port,
  debug: true,
  devtool: 'eval',
  output: {
    path: path.join(__dirname, '/../dist/assets'),
    filename: 'app.js',
    publicPath: `.${defaultSettings.publicPath}` // <- Remove the leading dot!
  },

Hope this helps.

[weblogixx]

Hi @rukshn,

this was fixed with react-webpack-template@1.7.0. After upgrading your generators dependencies (npm update -g with global install), new projects will have this back as default.

Thanks again for your input.