Первая загрузка под URL-адреса, который требует данных с сервера, в приложении реагирования с использованием React Router v4.3 и create-реагировать-приложение

Question

Я уже получаю данные из API на главной странице приложения localhost:3000/products-list.Затем я могу перейти к страницам с различными продуктами, используя React Router.

Однако, когда я впервые пытаюсь перейти на страницу продукта, например localhost:3000/product-a, и так как данные не сохраняются в браузере localStorage (учитываяэто первый раз, когда пользователь использует приложение), я получаю сообщение об ошибке, что ссылаюсь на неопознанный объект.

Поэтому я рассуждаю о том, что мне нужно получить данные с сервера для этого конкретного продукта, чтобы его страница могла отображаться.

Или это обычно обрабатывается по-разному, перенаправляя вызов на localhost:3000, чтобы приложение могло правильно инициализироваться, затем оно перенаправит вызов на localhost:3000/product-a с помощью React Router?

Или мне нужнонастроить рендеринг на стороне сервера, чтобы это работало?

Answer 1

Вот как я решил это благодаря предложению @DCTID.При обновлении компонент выполняет рендеринг, даже если данные недоступны с сервера (хотя данные будут отсутствовать. При получении данных с сервера будет отображаться). Если используется постоянное состояние, данные не будут извлечены при последующем обновлении.,

class SingleProduct extends Component {
//first I check if the product list is available. If not, I fetch it from server
//by calling a thunk  
  componentDidMount(){
    if (_.isEmpty(this.props.products)){
      this.props.injectThunk()
    }
}

render(){

  let id=this.props.match.params.id//Product ID from using React Router
  //Then I find the relevant product by looking for its ID in the product list
//I can then display the product properties    
    return (
      <div>
      {product.title}
      {product.price}
       etc...
      </div>
)}
  }

  function mapStateToProps(state){

    return {
            products: state.products,
                   };
  }

  export default withRouter(connect(mapStateToProps,{injectThunk})(SingleProduct))