RoR后端渲染JSON时to_param或slug失效，前端链接无法工作

问题根源 #

后端to_param只是修改了路由接收的参数格式，但默认的JSON序列化不会自动把code（也就是to_param的返回值）作为slug字段输出，导致前端拿到的JSON里没有可用的友好标识，生成链接时只能用id或者拿到null的slug，最终链接失效。

具体解决步骤 #

1. 修正后端JSON序列化，输出正确的slug字段
   如果不用序列化器，直接在Game模型里重写as_json方法，把to_param的结果加入JSON：

   # app/models/game.rb
   def as_json(options = {})
     # 保留原有字段，新增slug字段
     super.merge(slug: to_param)
   end
   

   如果用Active Model Serializers这类序列化工具，直接在序列化器里添加slug字段：

   # app/serializers/game_serializer.rb
   class GameSerializer < ActiveModel::Serializer
     attributes :id, :code, :slug, # 其他业务字段
   
     def slug
       object.to_param
     end
   end
   

   这样返回的JSON里就会有slug: "BT526"这类正确值，而不是null。

2. 前端改用slug生成链接
   在React组件里生成游戏链接时，替换原来的id为JSON返回的slug字段：

   // 错误写法（用id）
   // <a href={`/games/${game.id}`}>{game.name}</a>
   
   // 正确写法（用slug）
   <a href={`/games/${game.slug}`}>{game.name}</a>
   

3. 确保后端控制器能通过code查询游戏
   虽然你说后端运行正常，但还是要确认控制器的show方法能正确识别code参数：

   # app/controllers/games_controller.rb
   def show
     # 替换原来的Game.find(params[:id])
     @game = Game.find_by(code: params[:id])
     # 可选：兼容id查询，避免旧链接失效
     # @game = Game.find_by(code: params[:id]) || Game.find(params[:id])
   end
   

验证 #

重启后端服务后，前端重新请求Game数据，检查返回的JSON里是否有正确的slug值，再点击链接测试是否能正常跳转。

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