在生产模式下刷新页面时，React组件未呈现

Question

React js component is not rendering when the pages got refreshed and inner pages on production mode But its Working in Development Mode with same Code..

I'm Using React Router V4, React js with Redux, Webpack.

class Router extends React.Component {
      render() {
          return (
            <Provider store={store}>
              <BrowserRouter>
              <Switch>
                 <Route exact path="/" component={LandingPage} />
                 <Route exact path="/chapterlist" component={chapterList} />
                 <Route exact path="/posts/:id" component={ChapterDetail} />
                  <Route  path="*" component={NotFound} />
                </Switch>
              </BrowserRouter>
            </Provider>
          );
        }
      }

Check Screenshot

Answer 1

I guess you need to setup the publicPath option in your webpack output section.

output: {
  ...
  publicPath: '/'
}

The error you are having is because when you use a route like /posts/203075 and your publicPath is not configured then the resources can't be founded. Webpack thinks that your files are in this kind of route /posts/styles.css .