部署到github页面后,Axios从文件中获取数据不起作用

IT技术 javascript reactjs axios
2021-05-06 11:31:31

我正在使用 Webpack 编写 React 应用程序,而不是创建 React 应用程序。这是一个示例项目文件夹结构:

data
    targetData.md
src
    component
        Text.js
    container
        App.js
    index.js
index.html

我想从内容到阅读targetData.mdText.js成分,但它似乎并不奏效,因为我得到一个Request failed with status code 404部署到Github的页面后,在控制台中。我已经安装了 gh-pages,能够正确部署,并且除了我尝试从文件中读取的内容之外,所有内容都在呈现,使用以下代码无法正常工作:

axios.get('https://username.github.io/data/' + filename)
    .then( response => {
        this.setState({
            ...this.state,
                data: response.data
            });
        })
        .catch(function (error) {
            console.log(error);
    });

渲染它:

 render() {
        return(
            <div>
                 {this.state.data? (<div className={styles.content}>{this.state.data}<div/>) : null}
            </div>
    )
}

当我在开发模式下使用相对路径时它可以工作,但是当我将它部署到 GitHub 页面时,我注意到找不到 404,所以我想如果我把域 URL 放在它应该工作,但它没有。axios.get(????)部署到 GitHub 页面后,路径名应该是什么

1个回答

GitHub 在他们的视图中显示文件。如果您想检索内容,则需要获取文件的原始版本。

  1. 访问您的 GitHub 存储库并导航到targetData.md.
  2. 在右侧,您会看到一个按钮Raw
  3. 单击它,将显示文件的内容。
  4. 在您的axios.get()通话中使用该链接

GitHub 存储库的屏幕截图

url 将包含原始词,看起来像这样
https://raw.githubusercontent.com/[your-username]/[your-application]/gh-pages/data/targetData.md