reactjs - React app on gh pages showing 404s for static files

Question

I know there have been a lot of questions for this topic but I've tried everything and still no luck.

I have this in my index.js file

const routing = (
  <HashRouter basename={process.env.PUBLIC_URL}>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/year_2019" render={(props) => <Year {...props} year={`2019`} />} />
      <Route path="/year_2018" render={(props) => <Year {...props} year={`2018`} />} />
      <Route path="/year_2017" render={(props) => <Year {...props} year={`2017`} />} />
      <Route path="/year_2016" render={(props) => <Year {...props} year={`2016`} />} />
      <Route path="/decade" render={(props) => <Year {...props} year={`Decade`} />} />
      <Route path="/ShowAlbums" component={ShowAlbums} />
      <Route path="/ShowSongs" component={ShowSongs} />
      <Route path="/collage" component={Collage} />
    </div>
  </HashRouter>
)

ReactDOM.render(routing, document.getElementById('root'));

I have this in my package.json

{
  "name": "albums-site",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://mrkerr.github.io/react-music",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.3",
    "@testing-library/user-event": "^7.1.2",
    "gh-pages": "^2.1.1",
    "react": "^16.12.0",
    "react-burger-menu": "^2.6.13",
    "react-dom": "^16.12.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "react-twitter-embed": "^3.0.3",
    "react-typed": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

and I have this in my index.html

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

I run npm run deploy and go to https://mrkerr.github.io/react-music/ and it loads the index.html but gives 404s for the manifest.json and says net::ERR_ABORTED 404 for the main.chunk.js. I'm not sure what else to try, any help is greatly appreciated!

标签： reactjsgithub-pages

Answer 1

All of your asset links are resolving to an incorrect URL. Specifically there is an extra mrkerr in the path to the assets which is not exactly where they are located.

For the manifest.json specifically, the browser is trying to download https://mrkerr.github.io/mrkerr/react-music/manifest.json instead of https://mrkerr.github.io/react-music/manifest.json

I think the solution is to change your "homepage" in the package.json to "homepage": "https://mrkerr.github.io/react-music".

There might also be another configuration option that is setting the PUBLIC_URL variable incorrectly.