Is a trailing slash significant in a URL with create-react-app?

Viewed 285

I’ve built a React app using create-react-app. When I run npm start, the browser opens to localhost:3000/proj/t. (Note the lack of a trailing slash.)

The app breaks, because it can’t fetch a data file located at localhost:3000/proj/t/data/file.json. The app seems to be looking for the non-existent localhost:3000/proj/t/proj/data/file.json.

My fetch code looks like:

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
    })
};

If I add a slash at the end of the URL in the browser (localhost:3000/proj/t/), everything works fine. The data is retrieved from localhost:3000/proj/t/data/file.json and all is well.

In the above code, if I log slug just before the fetch, it always has the correct value: file. So that part doesn’t seem to be the problem.

So, I have two questions:

  1. Is there a way to make npm start open the url with the trailing slash? This would at least make development easier. (I tried changing the value of homepage in package.json, but the presence or absence of a trailing slash seems to make no difference in the (local) app behavior.)
  2. Why is this happening? I thought that the trailing slash in a URL that ends with a directory was optional.
0 Answers
Related