React Router部署疑问：无需Node.js主机且移除URL#号方案

Hey there! Let's tackle your problem head-on—you're building a content-focused React site with React Router, and you're stuck choosing between Node.js hosting, regular hosting, and getting rid of that annoying # from HashRouter. Here are your best solutions:

1. Keep BrowserRouter (No #) & Configure Your Static Host #

The # from HashRouter is a workaround for static hosts that don't handle single-page app (SPA) routing. If you want to stick with BrowserRouter (clean URLs), you just need to tell your host to redirect all requests to your index.html file. Here's how to do it for common setups:

• Apache: Create a .htaccess file in your project root with this code:

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

• Nginx: Add this to your server block configuration:

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

• Static hosting platforms (Netlify, Vercel, etc.): Most of these have built-in support for SPAs. For Netlify, create a _redirects file in your public folder with:

  /*    /index.html   200
  

  Vercel automatically handles this if you deploy a React app—no extra config needed.

2. Use a Static Site Generator (SSG) for Content Sites #

Since you're building a content-focused site, this might be the best long-term solution. Tools like Gatsby or Next.js (Static Export) generate actual static HTML files for each of your routes during build time. This means:

• No # in URLs, just clean paths like /blog/post-1
• You can deploy directly to any static host (no server config needed)
• Way better SEO for content sites (search engines can crawl the static HTML easily)
• Faster load times for your users

For Next.js, you can run next build && next export to generate a static out folder that you can upload to any host. Gatsby builds a public folder with all your static files by default.

3. Host on Node.js with a Simple Server #

If you already have or prefer Node.js hosting, you can set up a basic Express server to serve your React app and handle routing. Here's a quick example:

1. Install Express: npm install express
2. Create a server.js file:

   const express = require('express');
   const path = require('path');
   const app = express();
   
   // Serve static files from the build folder
   app.use(express.static(path.join(__dirname, 'build')));
   
   // Handle all requests by sending back index.html
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, 'build', 'index.html'));
   });
   
   const port = process.env.PORT || 3000;
   app.listen(port, () => {
     console.log(`Server running on port ${port}`);
   });
   

3. Build your React app: npm run build
4. Start the server: node server.js

This way, BrowserRouter works perfectly with clean URLs, and you're using Node.js hosting as intended.

Quick Recap #

• Want clean URLs on a regular static host? Use BrowserRouter + configure your host to redirect all requests to index.html.
• Best for content sites? Go with an SSG like Gatsby or Next.js Static Export—you get clean URLs, great SEO, and easy deployment.
• Already using Node.js hosting? Set up a simple Express server to handle routing fallback.

You don't have to settle for the # in HashRouter—these solutions let you keep clean URLs while choosing the hosting option that fits your needs.

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