Question

我正在使用react-router（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>
)

Wen在本地运行IIS，我在浏览器上访问localhost，我可以得到＆＃34; CL＆＃34;组件和显示页面，但是，如果我去/验证，我会得到

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文件（如 Bo Chen 所述）。

 <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

你可以做两件事......

添加虚拟路径以指向每个路径的spa文件夹。
使用IIS URL重写模块。这是您使用SO应用程序的长时间讨论，所以这里有一篇描述它的帖子 - http://weblogs.asp.net/owscott/rewrite-vs-redirect-what-s-the-difference

Answer 5

另一种选择是在IIS上使用应用程序，以确保您拥有可能派上用场的其他功能，例如基于MVC的ASP.NET框架。你可以在那里找到一条路线，它只是捕获所有未经专门映射的请求（例如/ 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")});

        });

Answer 6

这是一个有效的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>

如何在Microsoft IIS上使用react router（createBrowserHistory）来使路由工作？

6 个答案: