Error "Cannot GET" url in browser after refresh a Redux component

Question

I'm rendering the following component properly on the URL localhost:8080/productDesc/433899641 on first load navigating from another component. However when refreshing the page, browser does not load React and returns in the display the error message "Cannot GET /productDesc/433899641" and nothing in the console to debug

import React from 'react'

const ProductDesc = (props)=>{

    function test(element,index,array){
      var convertId = Number(productId)
      if(element.id === convertId){
        return true;
      }
    }
    const products  = props.products;
    const productId = props.params.itemId;

    const i = products.findIndex(test);

    const product = products[i];
    console.log(product);

    return (
     <ProductComponent />
    )

}

ProductDesc.propTypes = {
  products: React.PropTypes.array
};

export default ProductDesc;

My routing is as below

  <Provider store={store}>
    <Router history={ history }>
      <Route path="/" component={ App }>
          <IndexRoute component={ ProductsGrid } />
          <Route
            path="/productDesc/:itemId"
            component={ ProductDesc }
          />
      </Route>
    </Router>
  </Provider>

How am i supposed to keep the current state and reload it? I'm using Redux

Answer 1

In order to survive the server reload, your server needs to support it too by responding with index.html no matter what path is requested. Otherwise, use hashHistory instead of browserHistory.