微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

带有 create-react-app 的 URL 中的尾部斜杠是否重要?

如何解决带有 create-react-app 的 URL 中的尾部斜杠是否重要?

我使用 create-react-app 构建了一个 React 应用程序。当我运行 npm start 时,浏览器会打开 localhost:3000/proj/t。 (注意没有尾部斜杠。)

应用程序中断,因为它无法 fetch 位于 localhost:3000/proj/t/data/file.json 的数据文件。该应用似乎在寻找不存在的 localhost:3000/proj/t/proj/data/file.json

我的 fetch 代码如下:

const getData = () => {
    fetch(`./data/${slug}.json`,{
        headers: {
            'Content-Type': 'application/json','Accept': 'application/json'
        }
    }
    ).then(function(response) {
        return response.json();
    }
    ).then(function(myJson) {
     // lots of processing here
    })
};

如果我在浏览器 (localhost:3000/proj/t/) 中的 URL 末尾添加斜杠,则一切正常。从 localhost:3000/proj/t/data/file.json 检索数据,一切正常。

在上面的代码中,如果我在 slug 之前记录 fetch,它总是具有正确的值:file。所以这部分似乎不是问题。

所以,我有两个问题:

  1. 有没有办法让 npm start 用结尾的斜杠打开网址?这至少会使开发更容易。 (我尝试更改 homepagepackage.json 的值,但尾部斜杠的存在与否似乎对(本地)应用行为没有影响。)
  2. 为什么会这样?我认为以目录结尾的 URL 中的尾部斜杠是可选的。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。