Как использовать реагирующий маршрутизатор (createBrowserHistory) в Microsoft IIS, чтобы маршрутизация работала?

Question

Я использую реагирующий маршрутизатор (createBrowserHistory) для моего приложения реакции.

Ниже мой код

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

Когда я запускаю IIS на локальном компьютере, я захожу на локальный хост в браузере, я могу получить компонент "CL" и показать на странице, однако, если я перейду к /validation, я получу

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

Кто-нибудь знает, что нужно добавить в IIS или мой код js, чтобы эта маршрутизация работала?

Answer 1

Я думаю, что вы говорите о реакции-маршрутизатор или аналогичные вещи ниже конфигурации на iis 7 работает для меня

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

Я немного поборолся с этим, поэтому напишу это для следующего человека: сначала обновите файл web.config (как упомянул Бо Чен).

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

Это найдет каждый запрос и перепишет его /index.html вместо.

Так что вам нужно иметь index.html в корне вашего проекта. Также обратите внимание на расширение файла.

Answer 3

Еще одна вещь, которую стоит отметить: убедитесь, что у вас установлено расширение URL Rewrite.

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

Вам также может понадобиться сделать iisreset после установки.

Answer 4

Вот рабочий файл web.config

<?xml version="1.0"?>
<configuration>
  <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>
  </system.webServer>
</configuration>

Answer 5

Есть две вещи, которые вы можете сделать...

1. Добавьте виртуальные пути, чтобы указать вашу папку spa для каждого маршрута.
2. Использовать модуль перезаписи URL IIS. Это долгое обсуждение того, как вы используете приложение SO, так что вот пост, описывающий его - http://weblogs.asp.net/owscott/rewrite-vs-redirect-what-s-the-difference

Answer 6

Другой вариант - использовать приложение поверх IIS, чтобы убедиться, что у вас есть другие функции, которые могут пригодиться, например, ASP.NET Framework с MVC поверх него. У вас может быть маршрут, который просто перехватывает все запросы, которые не были специально отображены (например, / api, / content), и направляет их в html таким образом, чтобы ваше приложение React могло их обработать. Преимущества перед чистым IIS действительно зависят от ваших обстоятельств.

Ниже приведен пример конфигурации моего маршрута для ASP.NET Core:

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")});

        });