如何解决react-router与express.Router()配合使用的路由异常问题？

Hey there! Let's get to the bottom of why your routes work with webpack-dev-server but break when running your Express server. I've run into this exact issue a bunch of times, so here's what's going on and how to fix it:

What's Causing the Problem? #

When you use webpack-dev-server, it's built to handle React's client-side routing out of the box—it automatically routes every request to your index.html, letting React Router take over and render the right component.

But when you switch to your Express server, things change. Express doesn't know anything about your React Router routes (like /dashboard or /profile). When a user tries to access one of those paths directly, Express looks for a server-side route that matches, can't find it, and throws an error or returns a 404.

Step-by-Step Fixes #

1. Make Sure Express is Serving Your Static Build Files #

First, you need to tell Express to serve the bundled React files (usually in a dist or build folder) as static assets. Add this line to your server code, adjusting the path to match where your Webpack output lives:

const path = require('path');
app.use(express.static(path.join(__dirname, '../client/dist')));

(Replace ../client/dist with the actual relative path to your bundled client files.)

2. Add a Catch-All Route for Client-Side Routing #

After defining all your API routes (the ones using express.Router()), add a catch-all route that sends your index.html for any non-API request. This lets React Router handle the routing once the app loads:

// All API routes go ABOVE this catch-all
const apiRouter = require('./routes/api');
app.use('/api', apiRouter);

// Catch-all for client-side routes
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/dist/index.html'));
});

Important: Put this catch-all route after your API routes—you don't want it to intercept requests to your API endpoints!

3. Double-Check Your Webpack & React Router Configs #

• Webpack Output: Make sure your webpack.config.js has publicPath: '/' in the output section. This ensures all your bundled assets (JS, CSS, images) load correctly from the root path:

  module.exports = {
    // ... other configs
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/' // This is key!
    }
  };
  

• React Router: If you're using BrowserRouter (which you should be for clean URLs), make sure you don't set an unnecessary basename unless your app is deployed to a subpath. For root deployment, it should look like this:

  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          {/* Your other routes */}
        </Routes>
      </Router>
    );
  }
  

Final Checks #

• Always build your client code first with Webpack before starting the Express server—otherwise, there won't be any bundled files for Express to serve!
• Test by restarting your Express server with nodemon and trying to access routes directly (like localhost:3001/about). It should load the correct React component now.

This setup works because we're letting Express handle API requests and static assets, then handing off all other routing to React Router by serving the index.html file every time a client-side route is requested.

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