React App returns 刷新后出错

Question

我正在使用 React Router v4 创建一个 React/Redux 应用程序。它有一个简单的架构

--RootPage    path /
 --HomePage   path /h
   -Gallery   path /h/portfolio
   -Links     path /h/links
   -About     path /h/about

现在，每次刷新时，如果我在二级 /h/portfolio，或 /h/links，或 /h/about，就会出现此错误 net::ERR_ABORTED。

如果我在根级别或 /h/ 级别，刷新工作正常。我已经将 historyApiFallback: true 添加到 devServer，所以这不是那个问题。每次刷新时都必须始终转到 / root 有点低效。这里可能有什么问题？

这是我的路线

const mainRouter=(
    <Wrapper>
<Provider store={store} history={history}>
  <BrowserRouter>
      <div>
      <Route exact path="/" component={Home}/>
      <Route path="/h" component={HomePage}/>
       </div>
   </BrowserRouter>
    </Provider>
    </Wrapper>
  )

并且在首页

       <main>
          <Route path={`${this.props.match.path}/portfolio`}
          render={ ()=><Gallery {...this.props}/> } />
          <Route path={`${this.props.match.path}/about`} render={ ()=><About 
          {...this.props}/> }/>
          <Route path={`${this.props.match.path}/links`} render={ ()=><Links 
          {...this.props}/> }/>

      </main>

Answer 1

在 express server 而不是 devserver 上重现同样的问题后，我得到了同样的错误并做了一些研究，我发现了这个 simple fix 这个问题

我所要做的就是将 <script src="js/app.bundle.js"></script> 更改为 <script src="/js/app.bundle.js"></script>

编辑：如果你像我一样使用 Webpack-html-plugin，它仍然会出现同样的错误，我不得不通过在 webpack 配置文件

中添加 output.path.publicPath:"/" 来解决它

React App returns 刷新后出错

React App returns error after refresh

reactjs

redux

react-router-v4