Nested Routes and browserHistory - react-router

Question

I'm having some trouble working with browserHistory and nested routes. The main issue is entering a path directly or refreshing the browser: works perfectly for non-nested routes but not for nested routes.
I'm using webpack-dev-server locally and I am using the history-api-fallback flag:
Without the history-api-fallback flag: any route I type in directly or refresh on gives me "Cannot GET /..." rendered in the browser window. This is expected behavior.
With the history-api-fallback flag: non-nested routes work fine typed in directly or refreshed on but nested routes do not. I don't get the same react-router(?) error rendered in the browser window but I do get 404s in the console, it looks like the browser is trying to load the webpack bundle from one level up in the path (e.g. if I'm on /schools/edit and I hit refresh, the browser tries to load the webpack bundle.js from /schools/ and 404s out).
I have a very simple setup with only a couple of nested routes. All components are simply rendering a div with text for now (with the exception of App and Schools which both also output this.props.children to render their child routes).
My routes:
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="schools" component={Schools}>
<IndexRoute component={SchoolManager} />
<Route path="manage" component={SchoolManager} />
<Route path="edit" component={SchoolEditor} />
</Route>
<Route path="*" component={Home} />
</Route>
</Router>
Webpack config:
entry: [
'webpack/hot/only-dev-server',
'./app/scripts/main.js',
'./app/styles/main.scss'
],
devtool: 'source-map',
output: {
path: './build/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=stage-0,presets[]=react'],
exclude: /node_modules/
},
{
test: /\.(html|png)$/,
loader: 'file?name=[path][name].[ext]&context=./app'
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
},
plugins: [
new webpack.NoErrorsPlugin()
],
watchOptions: {
poll: true
}
NPM script to start webpack dev server (run from inside a Vagrant vm):
webpack-dev-server --host 0.0.0.0 --progress --colors --inline --hot --history-api-fallback
To summarize:
<Link>ing to any of the paths above works fine, /schools, /schools/manage, /schools/edit, etc.
Typing in or refreshing on /schools works fine.
Typing in any of the other nested paths (/schools/manage, /schools/edit) or refreshing on them does not work.
I realized as I was typing this out that 'schools' is also technically a nested route but seems to work fine, so it's likely there's something else going on. Thanks in advance for any insight.

Answer 1

After resigning myself to hashHistory for the longest time, finally came across the solution for nested routes. Just had to change the bundle script src from bundle.js to /bundle.js. The leading / ensures that the browser will load bundle.js from the root directory. Credit to Fastas: Unexpected token < error in react router component