Come utilizzare react router (createBrowserHistory) su Microsoft IIS per rendere funzionante il routing?

Question

Sto utilizzando react-router (createBrowserHistory) per la mia app di risposta.

Qui di seguito è il mio codice di

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 eseguito IIS a livello locale, vado a localhost nel browser, posso ottenere componente "CL" e mostrare a pagina, però, se vado a/validazione, mi metterò

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

Qualcuno sa cosa è necessario aggiungere a IIS o il mio codice js per fare questo lavoro di routing?

Answer 1

Ci sono due cose che si possono fare ...

1. aggiungere percorsi virtuali per puntare alla cartella spa per ogni percorso.
2. Utilizzare il modulo di riscrittura dell'URL di IIS. Si tratta di una lunga discussione il vostro stato usando l'applicazione SO, quindi ecco un post che descrive it- http://weblogs.asp.net/owscott/rewrite-vs-redirect-what-s-the-difference

Answer 2

Un'altra opzione sta usando un'applicazione in IIS per assicurarsi che hai altre caratteristiche che potrebbero tornare utili, come il framework ASP.NET con MVC su di esso. Potresti avere un percorso lì che cattura semplicemente tutte le richieste che non sono mappate in modo specifico (come/api,/contenuto) e le instrada verso l'html in modo tale che l'app React possa gestirle. I vantaggi rispetto a IIS puro dipendono davvero dalle circostanze.

Quello che segue è la mia configurazione percorso per ASP.NET core, per fare un esempio:

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

Penso che si sta parlando di reagire-router o roba simile sotto configurazione in IIS 7 opere per me

<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

ho lottato con questo un po 'così lo scrivo per la prossima persona: primo aggiornamento del file web.config (come Bo Chen menzionato).

<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> 

Ciò trovare ogni richiesta e riscriverlo per /index.html invece.

Quindi è necessario avere un index.html nella radice del progetto. Prestare inoltre attenzione all'estensione del file.

Answer 5

Un'altra cosa da notare: assicurati di aver installato l'estensione di riscrittura dell'URL.

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

Potrebbe anche essere necessario fare un iisreset dopo l'installazione.