server fall back and nested routes with react-router and url parameters

Question

In my react app I'm using react-router with BrowserRouter. my webpack file has

devServer.historyApiFallback: true

I have a

<Route path='/details/:parameter' />

when navigating through the app, both the fallback and the route(s) work as expected.

However, if I'm on the route that serves at /details/:parameter and I refresh, the app breaks and tells me in the console that it can't find

/details/webpack_bundle.js

however the url in the browser still contains the correct route with its parameter.

I was hoping to find an elegant solution to this. Any explanation for why it's behaving this way is appreciated.

Answer 1

duplicate question: see React nested route fails to load on refresh.

I'm using HTML Webpack Plugin in webpack and this is the solution I found.

webpackConfig.output.publicPath = '/'

this loads the bundle from the root directory.

Answer 2

Open up your console and check if your getting an unexpected token error '<'

It's probably because in index file you're missing a slash '/' before the bundle.js. Change it to <script src='/bundle.js'><script>

Check out this answer: Express.js, Unexpected token <