Wie verwende ich den reaktiven Router (createBrowserHistory) in Microsoft IIS, um das Routing zu ermöglichen?

Question

Ich benutze React-Router (createBrowserHistory) für meine Reactive-App.

Unten ist mein Code von

var ReactDOM = require('react-dom') ; 

var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var Link = ReactRouter.Link; 
var browserHistory = require('react-router'); 
var createBrowserHistory = require('history/lib/createBrowserHistory'); 

var CL = require('./page1/1.jsx'); 
var Validation = require('./page3/3.jsx'); 
var Infos = require('./page4/4.jsx'); 
var Confirm = require('./page7/7.jsx'); 
var Upload = require('./page8/8.jsx'); 

module.exports = (

    <Router history={new createBrowserHistory()}> 
    <Route path='/' component={CL}></Route>                                  
    <Route path='/validation' component={Validation}></Route>                                  
    <Route path='/infos' component={Infos}></Route>                                  
    <Route path='/confirm' component={Confirm}></Route>                                  
    <Route path='/upload' component={Upload}></Route>                                  
    </Router> 
) 

Wen IIS auf lokale laufen, gehe ich auf Browser auf localhost, kann ich „CL“ Komponente erhalten und auf Seite zeigen aber, wenn ich/Validierung gehen, ich werde erhalten

Failed to load resource: the server respond with status of 404 (Not Found) 

Wer weiß, was zu IIS oder meine js Code hinzufügen müssen, um diese Routing-Arbeit zu machen?

Answer 1

Es gibt zwei Dinge, die Sie tun können ...

1. virtuellen Pfaden in einen Spa-Ordner für jede Strecke zu zeigen.
2. Verwenden Sie das IIS-URL-Rewrite-Modul. Dies ist eine lange Diskussion um Ihre die SO App, also hier ist ein Beitrag it- http://weblogs.asp.net/owscott/rewrite-vs-redirect-what-s-the-difference

Answer 2

Eine weitere Option auf IIS eine Anwendung verwendet Beschreiben Sie andere Funktionen bekommen, um sicherzustellen, haben die sich als nützlich erweisen könnte, wie das ASP.NET-Framework mit MVC darüber. Sie könnten dort eine Route haben, die einfach alle Anfragen abfängt, die nicht speziell zugeordnet sind (wie/api,/content) und diese so an den html weiterleiten, dass Ihre React-App damit umgehen kann. Die Vorteile gegenüber reinem IIS hängen wirklich von Ihren Umständen ab.

Das folgende ist meine Strecke Konfiguration für ASP.NET-Core, ein Beispiel zu geben:

app.UseMvc(routes => 
     { 
      routes.MapRoute(
       name: "default", 
       template: "{controller}/{action}/{id?}", 
       defaults: new {controller = "Home", action = "Index"}, 
       constraints: new { controller = new NotEqualConstraint("api")}); 

      routes.MapRoute("api", "api/{controller}/{action}/{id?}"); 
      routes.MapRoute("React failover", "app/{*uri}", new {controller = "App", action = "Index"}, 
       new {controller = new NotEqualConstraint("api")}); 

     }); 

Answer 3

Ich glaube, Sie sprechen zu reagieren-Router oder ähnliche Sachen unter Konfiguration auf iis 7 Werke für mich

<rules> 
    <rule name="Rewrite Text Requests" stopProcessing="true"> 
     <match url=".*" /> 
      <conditions> 
         <add input="{HTTP_METHOD}" pattern="^GET$" /> 
         <add input="{HTTP_ACCEPT}" pattern="^text/html" /> 
         <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
      </conditions> 
      <action type="Rewrite" url="/index.html" /> 
    </rule> 
</rules> 

Answer 4

ich habe mit diesem ein wenig zu kämpfen, damit ich es für die nächste Person schreiben: zuerst die web.config-Datei aktualisieren (wie Bo Chen erwähnt).

<system.webServer> 
    <rewrite> 
     <rules> 
     <rule name="Rewrite Text Requests" stopProcessing="true"> 
      <match url=".*" /> 
      <conditions> 
      <add input="{HTTP_METHOD}" pattern="^GET$" /> 
      <add input="{HTTP_ACCEPT}" pattern="^text/html" /> 
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
      </conditions> 
      <action type="Rewrite" url="/index.html" /> 
     </rule> 
     </rules> 
    </rewrite> 

Dies wird jede Anfrage und schreiben Sie es auf /index.html statt finden.

Sie müssen also eine index.html im Stammverzeichnis Ihres Projekts haben. Achten Sie auch auf die Erweiterung der Datei.

Answer 5

Eine weitere Sache zu beachten: Stellen Sie sicher, dass Sie die URL Rewrite-Erweiterung installiert haben.

https://www.iis.net/downloads/microsoft/url-rewrite

Sie müssen möglicherweise auch eine iisreset nach der Installation zu tun.