Reload ReactJS page in development returns me blank

Question

whenever I click the 'reload' button on my browser during my ReactJS development, my page turns up blank and I have to go back to the base URL and start all over. May I know what I can do to keep some sort of 'history'?

I am using React-Router v4

webpack.config.js

devServer: {
    historyApiFallback: {
        disableDotRule: true,
        index: 'build/index.html
    }
}

My devServer has no output properties, only in the prodConfig:

output: {
    path: path.join(_dirname, '/build'),
    filename: '[name].[hash].bundle.js',
    publicPath: '/work/'
}

Directory:

/
- src
    - index.html
- webconfig.js

Cheers.

*Edit: added webpack code snippet

You need to make sure that you serve `index.html` for all of your routes so that React Router can take care of the routing in the browser. — Tholle, Nov 07 '18 at 09:17
Are you using an express server? or only React and react-router? and, are you using webpack? — c-chavez, Nov 07 '18 at 09:46
@Tholle How do i "make" sure i server index.html for all routes? — AKJ, Nov 07 '18 at 09:49
@AKJ and where is your index.html located exactly within the directory tree? — c-chavez, Nov 07 '18 at 11:06
@AKJ in your `webpack.config.js`, there should be an output... but it's easier if you post your complete `webpack.config.js` file. — c-chavez, Nov 07 '18 at 11:59
@c-chavez Codes is in company env and I cannot post codes here. — AKJ, Nov 07 '18 at 12:00
@AKJ this makes it tough, but just make sure that `devServer: { historyApiFallback: { index: ` is pointing to the correct path for your index.html. Try with `index: 'src/index.html` or `index: '/src/index.html`. There is also a `publicPath` property inside `devServer`, set that one to `publicPath: '/'` and see if that works. — c-chavez, Nov 07 '18 at 12:06
@c-chavez What is the diff between the index pointing to the build/index.html and the src/index.html? And also, is it alright if my devServer has no output? Because I have no publichPath in devServer — AKJ, Nov 07 '18 at 12:09
@AKJ `build/index.html` is just an example where index.html is inside a folder called `build`. You have to adjust it so that it points out to the correct folder structure. You added a structure where index.html seems to be inside a folder called src, that's why I suggested `src/index.html`. If `devServer` is alright, but it would be extremely helpful to see the complete webpack config. Webpack is tricky, but just play with what I wrote in the answer and these examples and you should be set to go. — c-chavez, Nov 07 '18 at 12:12
Thanks so much @c-chavez do i have to wrap the publicPath with an output and park one under the devServer as well? — AKJ, Nov 07 '18 at 12:15
@AKJ no you don't have to, but again, webpack is tricky. In my opinion try following [the official docs](https://webpack.js.org/configuration/dev-server/) first. Also, have a look at [this article](https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1) and [this as well](https://medium.freecodecamp.org/how-to-conquer-webpack-4-and-build-a-sweet-react-app-236d721e6745) to help you with webpack config. — c-chavez, Nov 07 '18 at 12:22

c-chavez · Accepted Answer · 2018-11-07T12:23:27.430

1

If you are using webpack, you can either set the historyApiFallback property of devServer like this:

devServer: {
    historyApiFallback: true
},

or like this (assuming index.html is located in your build directory):

devServer: {
    historyApiFallback:{
        index:'build/index.html'
    },
},

Change 'build/index.html' to point to the correct index.html path.

Alternatively, set it directly when you run the script in your package.json, like this:

"scripts": {
  "start" : "webpack-dev-server --history-api-fallback"
},

Have a look at the official docs of webpack here and here.

edited Nov 07 '18 at 12:23

answered Nov 07 '18 at 10:01

c-chavez

5,673
4
28
43

I added the historyApiFallback into the devServer, but it is still not working. Does it have something to do with the Routes and History objects? I tried it out, but couldnt get it to work – AKJ Nov 07 '18 at 10:18

Reload ReactJS page in development returns me blank

1 Answers1