Wie installiere ich eine React App basierend auf der BrowserHistory des react-routers in eine WordPress-Seite auf Apache?

Question

Ich habe eine React-App zum Ausführen auf einer einzelnen Seite einer WordPress-Website (http://example.com/myapp/) erstellt. Ich benutze react-router. Es funktioniert gut mit hashHistory, aber ich möchte die sauberen URLs verwenden, die browserHistory bietet.

Ich schreibe mod_rewrite und SetEnvIf Rezepte, um das Problem zu lösen, aber es gibt eine seltsame Komplikation mit der WordPress Rewrite-Regel. Wenn ich REQUEST_URI setze, sieht PHP diese Einstellung in REDIRECT_REQUEST_URI, die natürlich nicht wo WordPress aussieht.

Wie kann ich die Apache-Seite einer React-Router-App auf einer WordPress-Seite einrichten?

Hintergrund: When setting environment variables in Apache RewriteRule directives, what causes the variable name to be prefixed with "REDIRECT_"?

Answer 1

ich viele Dinge versucht, diese Arbeit zu machen, ohne Wordpress zu berühren, aber schließlich gab ich auf und trat ein gut kommentierte Patch in meinem Wordpress /index.php.

.htaccess:

# BEGIN myapp 
# 
# Set the REQUEST_URI to just /myapp for any deeper URI for the myapp React router. 
# 
# Unfortunately, this winds up setting REDIRECT_REQUEST_URI rather than 
# REQUEST_URI. See /index.php for a custom patch that works around this. 
# 
# Issue documented here: http://stackoverflow.com/a/10128290/1426950 
SetEnvIf Request_URI "myapp/.*" REQUEST_URI=/myapp/ 
# END myapp 

/index.php:

/** 
* 
* CUSTOM PATCH 
* 
* Work around an Apache issue documented here: http://stackoverflow.com/a/10128290/1426950 
* We need it for the React app at /myapp/. 
* 
* We need the WordPress page at /myapp/ to be served for any URL beginning 
* with /myapp/, so that we can control that namespace with React. To 
* accomplish this, we set REQUEST_URI in the .htaccess, but a subsequent rewrite 
* pushes that setting over to REDIRECT_REQUEST_URI and resets REQUEST_URI. 
* 
* This PHP code fools WordPress into thinking Apache did what we wanted. 
* 
*/ 
if (
    $_SERVER['REDIRECT_REQUEST_URI'] !== null 
) { 
    $_SERVER['REQUEST_URI'] = $_SERVER['REDIRECT_REQUEST_URI']; 
} 

jetzt alles funktioniert perfekt und Wordpress dient dazu, die Seite an /myapp/ für alle URLs der React app (/myapp/foo, myapp/bar/123, etc.).