GitHub Pages中React应用跳转非React子页面失效问题及解决

I’ve dealt with this exact problem before when deploying React apps to GitHub Pages alongside static non-React pages, so I know exactly what’s causing this behavior and how to fix it.

Your Setup Breakdown #

First, let’s recap your GitHub Pages directory structure for clarity:

pages\
------other-page-a\
-------------------index.html
------other-page-b\
-------------------index.html
------other-page-c\
------------------- ...
static\
asset-manifest.json\
favicon.ico\
index.html\
manifest.json\
service-worker.js\

• Your main site is a React application, but pages inside the pages/ folder are static (non-React) HTML files.
• You attempted to navigate to one of these static pages using this code:

  <div className="button" onClick={() => (window.location.replace = "https://stepanvanzuriak.github.io/pages/newspaper")}>
  

• The bug: The browser’s address bar updates to the correct URL, but the page never loads the target static content.

Why This Happens #

This issue stems from the default service worker configuration in Create React App. The built-in SWPrecacheWebpackPlugin includes a navigateFallback setting that tells the service worker to serve your main React index.html file for any navigation request that doesn’t match an existing static asset. This intercepts requests to your pages/ directory, preventing the browser from loading those non-React pages even though the URL changes.

The Solution #

To fix this, you’ll need to modify the webpack configuration to remove the problematic navigateFallback setting:

1. Eject from Create React App (this is a one-way operation, so make sure you’re comfortable with it):

   npm run eject
   

2. Open your project’s webpack production configuration file (typically found at config/webpack.prod.js).
3. Locate the section where SWPrecacheWebpackPlugin is initialized. Look for the navigateFallback property in its options object.
4. Remove the navigateFallback line entirely from the plugin’s configuration.
5. Rebuild your React app and redeploy it to GitHub Pages.

After making this change, your window.location.replace (or window.location.href) navigation will work as expected — the browser will correctly load the static non-React page instead of being intercepted by the service worker.

内容的提问来源于stack exchange，提问作者user6083685