Create React App执行npm run build后页面空白问题求助

Hey there, let's figure out why your CRA build is showing a blank page and how to fix it!

Why this happens #

When you set "homepage": "./" in package.json and use BrowserRouter, two key issues are likely causing the blank screen:

• BrowserRouter relies on the HTML5 History API, which requires your server to redirect all requests to index.html so the router can handle path routing. If you're opening the built index.html directly via the file:// protocol (double-clicking it) or your server isn't configured for this fallback, the browser can't resolve route paths correctly.
• With a relative homepage value, React Router doesn't automatically detect your app's base path, leading it to look for routes at the wrong root location.

Fixes to try #

1. Switch to HashRouter (quick fix for local testing or simple deployments) #

HashRouter uses the URL's hash (the # section) to manage routes, which works without any server configuration—ideal for testing the build locally or deploying to static hosts that don't support rewrites.

Update your App.tsx like this:

import React from 'react';
import { Route, Switch, HashRouter } from 'react-router-dom'; // Replace BrowserRouter with HashRouter
import HomeDashboard from './containers/Home'

function App() {
  return (
    <div className="App">
      <HashRouter> {/* Changed from BrowserRouter */}
        <Switch>
          <Route exact path="/home" component={HomeDashboard}></Route>
          <Route exact path="/" component={HomeDashboard}></Route>
        </Switch>
      </HashRouter>
    </div>
  );
}

export default App;

Rebuild with npm run build afterward—you’ll be able to open the index.html file directly or deploy it without server configuration issues.

2. Keep BrowserRouter with correct basename #

If you prefer clean URLs (without the #), you can stick with BrowserRouter by telling it your app's base path using basename, which CRA automatically provides via process.env.PUBLIC_URL (derived from your homepage setting).

Modify your App.tsx:

import React from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';
import HomeDashboard from './containers/Home'

function App() {
  return (
    <div className="App">
      <BrowserRouter basename={process.env.PUBLIC_URL}> {/* Add basename prop */}
        <Switch>
          <Route exact path="/home" component={HomeDashboard}></Route>
          <Route exact path="/" component={HomeDashboard}></Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Critical note: Server configuration required

For this approach to work when deploying to a server (Nginx, Apache, GitHub Pages, etc.), you need to set up the server to redirect all requests to index.html:

• For Nginx: Add this to your server block:

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• For GitHub Pages: If deploying to a repo subpath, set homepage to https://your-username.github.io/your-repo-name/—the basename fix above will handle the rest automatically.

3. Check for resource loading errors #

Occasionally, blank pages stem from failed asset loads (CSS, JS files). Open your browser's DevTools (F12) and check the Console/Network tabs:

• If you see 404 errors for assets, verify your homepage setting. For relative paths, "homepage": "./" should work, but if deploying to a subdirectory, use the full relative path (e.g., "/my-app/").

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