Nested routes are not working when URL is refreshed

[CreativeManix]

<Route path="/" component={App}>
    <IndexRoute component={FuelSavingsPage} />
    <Route path="about" component={AboutPage}/>
    <Route path="/auth"  component={AuthLayout} >
        <Route path="login" component={LoginPage}/>
        <Route path="atkn" component={AcceptTokenPage}/>
    </Route>
    <Route path="*" component={NotFoundPage} />
  </Route>

I have above configuration, when I navigate to /auth/login it works. however when I refresh the page, history fallback lib is not rendering the component instead it shows blank screen!

Should I do anything specifically?

[atfzl]

try this

<Route path="/" component={App}>
    <IndexRoute component={FuelSavingsPage} />
    <Route path="about" component={AboutPage}/>
    <Route path="auth" component={AuthLayout} >
        <IndexRoute component={LoginPage}/>
        <Route path="atkn" component={AcceptTokenPage}/>
    </Route>
    <Route path="*" component={NotFoundPage} />
  </Route>

[CreativeManix]

Sorry, It is not working. If I navigate using I am able to reach /auth/atkn however when I refresh my browser it is showing blank screen.

[atfzl]

Can you give the url to your repo.

[coryhouse]

@CreativeManix Get latest and try again. I added a leading slash in index.html for bundle.js. I believe this will fix your issue.

[coryhouse]

@CreativeManix - Is this issue resolved when you get latest?

[coryhouse]

Closing since this should have been fixed with a recent commit.

[jforaker]

This happens in the latest version as of 6/30/2016 (4.0.0), and is undesirable... any suggestions?

The pull request above references a file that is no longer in the repo.

STR:

1. clone repo and run it
2. navigate to http://localhost:3000/fuel-savings and refresh page
3. see Cannot GET /fuel-savings error

[coryhouse]

Great catch @jforaker. Bummer. This is my miss. The new structure for generating index.html via html-webpack-plugin caused this. I'm looking into a fix, but in the meantime, 4.0.0 will continue to work. I haven't cut a release in awhile so it's quite a few commits behind master.

[thatkit]

@CreativeManix I want to follow up on @coryhouse's answer on the leading slash solution.

In order to fix the issue by adding a leading slash to <script src="index.js"></script> (the react script imported in index.html).

webpack.config.js

const config = {
  entry: './src/app/index.tsx',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/', // 👈 added this property
  },
  // other configs

When publicPath added, I got <script src="/index.js"></script> and solved the issue