Rails集成React访问/airlines/:slug触发路由匹配错误如何解决

1. 核心错误：React路由路径配置错误 #

你当前App.js中的根路由规则写为path="//*"，多写了一个前置斜杠，破坏了React Router v6的路径匹配逻辑，导致/airlines/:slug规则无法被正常识别。
修正后的App.js代码如下：

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Airlines from './Airlines'
import Airline from './Airline'

const App = () => {
  return (
    <Routes>
      <Route path="/*" element={<Airlines />} />
      <Route path="/airlines/:slug" element={<Airline />} />
    </Routes>
  )
}

export default App

2. 额外校验项 #

• 确认你的Rails项目中pages#index控制器方法正确返回React应用的入口HTML，目前你配置的get '*path', to: 'pages#index', via: :all路由规则本身没有问题，可以正确处理前端路由的刷新场景。
• 确认你安装的react-router-dom版本为v6，你当前使用的<Routes>、element属性都是v6的专属语法，若版本不匹配也会出现路由匹配异常。
• 后端airlines#show接口的逻辑没有问题，可以正常根据slug返回对应航司的序列化数据，和本次前端路由报错无关。

内容的提问来源于stack exchange，提问作者Piotr Polański