React App returns error after update

I am building a React / Redux application with React Router v4. It has a simple architecture.

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

Now, every time I update, if I am at the second level / h / portfolio or / h / links or / h / about, this error is net :: ERR_ABORTED.

enter image description here

The update works fine if I'm at the root level or / h / level. And I added historyApiFallback: trueto devServer, so this is not a problem. This bit is unproductive to switch to / root each time I update. What could be wrong here?

Here are my routes

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

And in HomePage

       <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>
+4
source share
1 answer

- devserver, ,

, , <script src="js/app.bundle.js"></script> <script src="/js/app.bundle.js"></script>

: Webpack-html-plugin, , - ​​ , , output.path.publicPath:"/" webpack

+7

Source: https://habr.com/ru/post/1686137/


All Articles