使用next-routes的React应用动态路由刷新404问题咨询

我之前也碰到过一模一样的问题！核心原因是：当你在客户端通过导航跳转时，next-routes会帮你处理路由映射，但刷新页面时，浏览器直接向服务器发起/campaigns/:address这类URL的请求，默认的Next.js服务器根本不知道该把这个请求转发到哪个页面，所以返回404。要解决这个问题，你需要配置自定义服务器来让next-routes的规则在服务器端也生效。

步骤1：创建自定义服务器文件 #

在项目根目录下新建server.js，内容如下：

const { createServer } = require('http');
const next = require('next');
const routes = require('./routes'); // 引入你的路由配置文件

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = routes.getRequestHandler(app);

// 启动服务器并让next-routes处理所有请求
app.prepare().then(() => {
  createServer((req, res) => {
    handle(req, res);
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

步骤2：修改package.json的启动脚本 #

把原来的启动命令替换成使用自定义服务器：

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

额外检查点 #

• 确保你的页面文件存在：比如/campaigns/show对应的是pages/campaigns/show.js，其他路由对应的页面文件也要正确存在。
• 如果你是用next export做静态导出，next-routes的动态路由会不兼容（因为静态导出需要预生成所有可能的路由），这种情况下建议改用Next.js内置的动态路由（比如pages/campaigns/[address].js），并在getStaticPaths中配置fallback: true来支持动态参数的路由刷新。

这样配置后，不管是客户端导航还是刷新页面，服务器都会按照next-routes的规则把请求转发到对应的页面，就不会出现404了。

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