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

Question

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

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

我正在尝试从targetData.md组件中的Text.js读取内容，但似乎无法正常工作，因为在部署到Github Pages之后，我在控制台中收到Request failed with status code 404 。 我已经安装了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()调用中使用该链接。

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