React with React-Router 在本地主机上工作，但在 cPanel 上部署后无法获取 api 调用

Question

我已经搜索了几个小时，现在找不到可行的解决方案。我遵循了本指南

https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6

一切正常，除了当我进入反应路由器路径时。

它不仅会失败或 return 404，还会显示 TypeError（基本上 API returning null 或 undefined）

具有相同 API 调用的相同路由在 localhost:3000 上完美运行。

我运行 npm 运行构建并将所有内容复制到 cPanel 文件管理器
进入我的域，一切正常，直到我点击了一个具有 api 抓取功能的 React 路由器路由，该路由在 localhost

<div>
                <Header />
                <Segment placeholder style={{marginTop: "2rem"}}>

                <Grid celled>
                    <Grid.Row>
                    <Grid.Column width={4}>
                        <Image src={`${this.props.config.images.secure_base_url}original${this.props.movieDetails.poster_path}`} wrapped ui />
                    </Grid.Column>
                    <Grid.Column width={12}>
                    <div className="carousel-container">
                            <div className="swiper-container">
                                <h2 className="swiper-container__title">Cast</h2>
                                <div className="swiper-wrapper">
                                    {this.props.movieCredits.cast.map(cast => {
                                        return (
                                        <div key={cast.cast_id} className="swiper-slide">
                                            <Link>
                                                {cast.profile_path ? <img className="swiper-slide__image" src={`${this.props.config.images.secure_base_url}w154${cast.profile_path}`} alt={cast.profile_path}/> : <img className="swiper-slide__image" src={placeholder} />}
                                                <p className="swiper-slide__title">{cast.name}</p>
                                                <p className="swiper-slide__details">as</p>
                                                <p className="swiper-slide__details">{cast.character}</p>
                                            </Link>
                                        </div>
                                        );
                                    })}
                                </div>

它在我使用 this.props.movieCredits.cast.map 迭代获取的 api 调用数据的部分失败。请注意，this.props.movieCredits 中的信息在与上图

完全相同的组件中被调用

const mapStateToProps = (state) => {
    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) => {
    return {
        getMovieDetails: url => dispatch(getMovieDetails(url)),
        getMovieCredits: url => dispatch(getMovieCredits(url)),
        getMovieReviews: url => dispatch(getMovieReviews(url)),
        getMovieVideos: url => dispatch(getMovieVideos(url))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ItemDetails);

以下是我获取数据的方式

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}&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}&language=en-US&page=1`)
                this.props.getMovieVideos(`https://api.themoviedb.org/3/movie/${id}/videos?api_key=${this.props.apiKey}&language=en-US`)
                break;
            case 'tv':
                break;
            case 'people':
                break;
            default:
                break;
        }
    }

如有任何帮助，我们将不胜感激，抱歉给您添麻烦了。

编辑！！！ TLDR + 重要编辑

休息后我想我找到了原因，因为 this.match.params.id 不起作用，问题应该是，如何从 url 获取参数时已部署

Answer 1

我认为 this.match.params 无法正常工作，这会导致 API 提取错误，我们将研究解决此问题的方法。

编辑

解决方案最终使用了不同的生命周期方法，不确定为什么它在 localhost 中有效，但改用 componentWillMount 解决了无法获取的问题。

React with React-Router 在本地主机上工作，但在 cPanel 上部署后无法获取 api 调用

React with React-Router works on localhost, but after deploying on cPanel fails to fetch api call

deployment

reactjs

react-router

fetch-api