2016-11-11 1 views
0

Ich benutze React-Router mit .htaccess und browserHistory. Wenn ich es richtig verstehe, leitet die .htaccess-Datei die URL zu index.html um, wenn der Benutzer die URL anspricht, die nur vom Frontend verfügbar ist und nicht vom Server verfügbar ist. Ich kopiert und eingefügt die .htaccess-Regel aus https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md und im Grunde ist es wie unten:wie man .htaccess leitet, um die richtige js-Datei auszuwählen, während der react-router verwendet wird?

RewriteBase/
RewriteRule ^index\.html$ - [L] 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /index.html [L] 

Das Problem ist, dass es nicht richtig js-Datei nicht verwendet, wenn der Benutzer Unter Route eintritt. Sagen wir, ich habe zwei Dateien in var/www - index.html, bundle.js.

Innerhalb von index.html,

<body> 
    <div id="content" class="content-div"></div> 
    <script src="bundle.js" ></script> 
</body> 

Innerhalb von bundle.js,

render((
    <Router history={browserHistory}> 
     <Route path="/" component={AppComponent}> 
      <Route path="post" component={PostComponent}> 
       <Route path=":postid" component={PostItemComponent}></Route> 
      </Route> 
     </Route> 
    </Router> 
), document.getElementById('content')); 

Es befindet sich auf Haupt Seite in Ordnung funktioniert - example.com. Aber wenn ich example.com/post/1 eingebe, zeigt der Browser mir eine leere Seite an, weil er versucht, auf example.com/post/bundle.js zuzugreifen, was nicht dort ist (ich habe nicht einmal einen Post-Ordner unter var/www) .

Ich könnte das Problem vorübergehend beheben, indem Sie var/www/post-Ordner erstellen und die Datei bundle.js in den Ordner einfügen. Aber ich denke nicht, dass das der richtige Weg ist. Kann mir bitte jemand sagen, wie ich es beheben kann, so dass es immer var/www/bundle.js verwendet, egal, welcher Sub-Site-Benutzer eingibt?

Antwort

1

einen Root-relativer Pfad für Ihren Skript-Tag:

<body> 
    <div id="content" class="content-div"></div> 
    <script src="/bundle.js" ></script> 
</body> 
+0

Ich dachte, dass es einfache Lösung so sein muss! Vielen Dank!!! –

Verwandte Themen