React Router Dom特定路由非www重定向异常问题咨询

问题根本不在React Router配置上，而是后端Express的重定向逻辑缺失或位置不对。现在非www域名下的/s/:id和/articles/*路由会先被返回index.html，最终跳转到www的首页，而不是对应的目标路径。

核心原因 #

你当前的Express代码里没处理非www转www的重定向，或者重定向逻辑被放在了静态文件、其他路由之后，导致特定路径的请求先被app.get("*")返回index.html，前端加载后触发了错误的跳转。

解决步骤 #

在Express应用的最顶部加一个重定向中间件，确保所有非www请求都带着完整路径跳转到www域名：

const app = express();

// 新增：非www转www重定向，必须放在所有路由之前
app.use((req, res, next) => {
  const host = req.get('host');
  // 匹配你的非www域名，同时排除localhost开发环境
  if (host && host === 'mywebsite.com' && !host.includes('www.')) {
    // 保留原请求的完整路径和查询参数
    res.redirect(301, `https://www.mywebsite.com${req.originalUrl}`);
  } else {
    next();
  }
});

// 以下是你原有的代码
app.use(express.static(path.resolve(__dirname, "../client/build")));
app.use(cors());
app.use("/api/packs", packRoutes);
// ... 其余路由和逻辑不变

为什么这能解决问题 #

这个中间件会在所有请求处理前先执行：

• 检查请求域名是不是非www的mywebsite.com
• 如果是，就用301永久重定向到www域名，同时带上原请求的完整路径（比如/s/testId或/articles/xxx）
• 要是是www域名或者本地开发环境，就继续走后面的逻辑

这样不管访问非www域名下的任何路径，都会正确跳转到www的对应路径，React Router就能正常解析路由了。

验证测试 #

改完后测试这些场景：

• 访问https://mywebsite.com/s/testId → 应该跳转到https://www.mywebsite.com/s/testId
• 访问https://mywebsite.com/articles/hello-world → 应该跳转到https://www.mywebsite.com/articles/hello-world
• 其他路由保持原有的正常重定向行为

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