部署到github页面后，Axios从文件获取数据无法正常工作

Question

我正在使用Webpack编写React应用，而未创建React应用。 这是一个示例项目文件夹结构：

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

我正在尝试从targetData.md组件中的Text.js中读取内容，但是由于部署后在控制台中出现了Request failed with status code 404，它似乎无法正常工作到Github Pages。我已经安装了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设置为可以使用，但不能使用。部署到GitHub页面后，该路径名应在axios.get(????)中起作用吗？

Answer 1

GitHub在其视图中显示文件。如果您想检索内容，则使用该文件的原始版本。

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

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