title: React with React-Router works on localhost, but after deploying on cPanel fails to fetch api call
body: <p>I have searched for a few hours now found no working solution. I followed this guide </p>
  
  <p><a href="https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6" rel="nofollow noreferrer">https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6</a></p>
  
  <p>and everything works fine,
  except for when I go into a react router path.</p>
  
  <p>It doesn't just fail or return 404, it shows TypeError (basically API returning null or undefined) </p>
  
  <p>The same route with the same API call works perfectly on localhost:3000.</p>
  
  <ol>
  <li>I ran npm run build and copied all the contents onto cPanel file manager</li>
  <li>Went to my domain and everything was working until I clicked into a react router route that has api fetching which works in localhost</li>
  </ol>
  
  <pre><code>&lt;div&gt;
                  &lt;Header /&gt;
                  &lt;Segment placeholder style={{marginTop: "2rem"}}&gt;
  
                  &lt;Grid celled&gt;
                      &lt;Grid.Row&gt;
                      &lt;Grid.Column width={4}&gt;
                          &lt;Image src={`${this.props.config.images.secure_base_url}original${this.props.movieDetails.poster_path}`} wrapped ui /&gt;
                      &lt;/Grid.Column&gt;
                      &lt;Grid.Column width={12}&gt;
                      &lt;div className="carousel-container"&gt;
                              &lt;div className="swiper-container"&gt;
                                  &lt;h2 className="swiper-container__title"&gt;Cast&lt;/h2&gt;
                                  &lt;div className="swiper-wrapper"&gt;
                                      {this.props.movieCredits.cast.map(cast =&gt; {
                                          return (
                                          &lt;div key={cast.cast_id} className="swiper-slide"&gt;
                                              &lt;Link&gt;
                                                  {cast.profile_path ? &lt;img className="swiper-slide__image" src={`${this.props.config.images.secure_base_url}w154${cast.profile_path}`} alt={cast.profile_path}/&gt; : &lt;img className="swiper-slide__image" src={placeholder} /&gt;}
                                                  &lt;p className="swiper-slide__title"&gt;{cast.name}&lt;/p&gt;
                                                  &lt;p className="swiper-slide__details"&gt;as&lt;/p&gt;
                                                  &lt;p className="swiper-slide__details"&gt;{cast.character}&lt;/p&gt;
                                              &lt;/Link&gt;
                                          &lt;/div&gt;
                                          );
                                      })}
                                  &lt;/div&gt;
  
  </code></pre>
  
  <p>it fails at the part where i use this.props.movieCredits.cast.map to iterate over fetched api call data. Note that the information inside this.props.movieCredits was called in the very same component as shown above, </p>
  
  <pre><code>const mapStateToProps = (state) =&gt; {
      return {
          config: state.PostMDBConfig,
          apiKey: state.PostMDBConfig.apiKey,
          moviesPopular: state.postMoviePopular,
          tvPopular: state.postTVPopular,
          itemType: state.setItemType.itemType,
          movieGenres: state.getMovieGenre,
          tvGenres: state.getTVGenre,
          movieDetails: state.getMovieDetails,
          movieCredits: state.getMovieCredits,
          movieReviews: state.getMovieReviews,
          movieVideos: state.getMovieVideos
      }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          getMovieDetails: url =&gt; dispatch(getMovieDetails(url)),
          getMovieCredits: url =&gt; dispatch(getMovieCredits(url)),
          getMovieReviews: url =&gt; dispatch(getMovieReviews(url)),
          getMovieVideos: url =&gt; dispatch(getMovieVideos(url))
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(ItemDetails);
  </code></pre>
  
  <p>Below is how I fetched the data</p>
  
  <pre><code>componentDidMount() {
          this.fetchData(this.props.match.params.id);
      }
  
  
      fetchData(id, type = this.props.match.params.type) {
          switch(type){
              case 'movie':
                  this.props.getMovieDetails(`https://api.themoviedb.org/3/movie/${id}?api_key=${this.props.apiKey}&amp;language=en-US`)
                  this.props.getMovieCredits(`https://api.themoviedb.org/3/movie/${id}/credits?api_key=${this.props.apiKey}`)
                  this.props.getMovieReviews(`https://api.themoviedb.org/3/movie/${id}/reviews?api_key=${this.props.apiKey}&amp;language=en-US&amp;page=1`)
                  this.props.getMovieVideos(`https://api.themoviedb.org/3/movie/${id}/videos?api_key=${this.props.apiKey}&amp;language=en-US`)
                  break;
              case 'tv':
                  break;
              case 'people':
                  break;
              default:
                  break;
          }
      }
  </code></pre>
  
  <p>Any help would be greatly appreciated, sorry about such a hassle.</p>
  
  <p><strong>EDIT!!! TLDR + IMPORTANT EDIT</strong></p>
  
  <p>After taking a break I think I've found the reason, being that this.match.params.id is not working, the question should be, <em>how to get params from url when deployed</em></p>