Sinatra und ein clientseitiges Routing

Question

Ich habe eine einfache Anwendung (Server-Seite ist Sinatra, Client-Seite ist ReactJS).

Der Workflow ist sehr einfach: Sinatra behandelt get "/" Anfrage und sendet eine index.html an den Client mit statischen Stylesheet und Skripten.

Skripte sind ReactJS App, die aus mehreren Komponenten und einem ReactRouter besteht. Jede React-Komponente ist eine eigene "Seite" mit einer eigenen Route/Pfad in Bezug auf den ReactRouter.

Zum Beispiel:

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

Während ich Client-Seite nur implementierte, funktionierte es ziemlich gut. Aber jetzt, wenn ich versuche, Sinatra für das Server-Side-Zeug zu verwenden, ist das kaputt: Wenn ich zur /form gehen will, bekomme ich Sinatras Standard-404-Seite ("Sinatra kennt dieses Liedchen nicht.").

Ich verstehe, dass Sinatra (oder Rack) den Pfad der Anfrage (/form von /finish) vor dem ReactRouter abfängt. Aber ich kann nicht verstehen, wie man es repariert (und warum ist es so, während Router-Skript bereits auf dem Client ist und zuerst auslösen sollte).

Danke für Ihre Hilfe.

Answer 1

Verwenden Sie die Wildcard-Route, um index.html an alle Routen zurückzugeben.

Etwas wie folgt aus:

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