Sinatra和客户端路由

Question

I have a simple application (server side is Sinatra, client side is ReactJS).

The workflow is very basic: Sinatra handles get "/" request and sends an index.html to the client with static stylesheet and scripts.

Scripts are ReactJS app which consists of several components and a ReactRouter. Each React's component is a distinct "page" with its own route/path in terms of the ReactRouter.

For example:

• "/" => "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") .

While I was implementing client side only, it worked pretty well. But now, when I am trying to use Sinatra for the server side stuff this is broken: when I want to go to the /form I am getting Sinatra's default 404 page ("Sinatra doesn't know this ditty.").

I understand that Sinatra (or Rack) intercepts the request's path ( /form of /finish ) before the ReactRouter. But I cannot understand how to fix it (and why is it so, while router script is already on the client and should fire first).

Thanks for your help.

Answer 1

Use wildcard route to return index.html to all route.

Something like this:

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