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

Question

在页面刷新和内部页面在生产模式下时，React js组件未呈现，但在开发模式下使用相同的代码工作。

我正在使用React Router V4，带有Redux的React js，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>
          );
        }
      }

检查截图

Answer 1

我猜您需要在webpack output部分中设置publicPath选项。

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

您遇到的错误是因为当您使用/posts/203075 publicPath类的路由并且未配置publicPath ，无法建立资源。 Webpack认为您的文件位于/posts/styles.css这样的路由中。