Sinatra 和客户端路由

Question

我有一个简单的应用程序（服务器端是 Sinatra，客户端是 ReactJS）。

工作流程非常基本：Sinatra 处理 get "/" 请求并使用静态样式表和脚本向客户端发送 index.html。

脚本是 ReactJS 应用程序，由几个组件和一个 ReactRouter 组成。每个 React 的组件都是一个独特的 "page"，在 ReactRouter 方面有自己的 route/path。

例如：

"/" => "index.html" (real html page with renered components inside),
"/form" => (ReactRouter points to component <Form/>, in fact render happens inside selector of "index.html"),
"/finish" => (ReactRouter points to component <Finish/>, in fact render happens inside selector of "index.html").

虽然我只实现了客户端，但它运行良好。但是现在，当我尝试将 Sinatra 用于服务器端时，这被打破了：当我想转到 /form 时，我得到了 Sinatra 的默认 404 页面 ("Sinatra doesn’t know this ditty.").

我了解 Sinatra（或 Rack）在 ReactRouter 之前拦截请求的路径（/form of /finish）。但是我不明白如何修复它（以及为什么会这样，而路由器脚本已经在客户端上并且应该首先触发）。

感谢您的帮助。

Answer 1

使用通配符路由到 return index.html 到所有路由。

像这样：

get '/*' do
  #return index.html
end

Sinatra and a client-side routing