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:
- Is there a way to make
npm startopen the url with the trailing slash? This would at least make development easier. (I tried changing the value ofhomepageinpackage.json, but the presence or absence of a trailing slash seems to make no difference in the (local) app behavior.) - Why is this happening? I thought that the trailing slash in a URL that ends with a directory was optional.