RedZagogulin RedZagogulin - 2 months ago 8
React JSX Question

Sinatra and a client-side routing

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

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

Something like this:

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