12

我正在为我的反应应用程序使用反应路由器（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，我可以获取“CL​​”组件并在页面上显示，但是，如果我转到 /validation，我会得到

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

任何人都知道需要添加到 IIS 或我的 js 代码以使此路由工作吗？

4

6 回答 6

23

我认为您在 iis 7 上的配置下谈论 react-router 或类似的东西对我有用

<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>
于 2016-09-30T05:40:27.697 回答
9

我对此有点挣扎，所以我为下一个人写了它：首先更新 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。还要注意文件的扩展名。

于 2016-11-23T11:39:15.210 回答
3

需要注意的另一件事是：确保安装了 URL 重写扩展。

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

您可能还需要iisreset在安装后进行。

于 2017-02-17T20:27:18.817 回答
2

这是一个有效的 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>
于 2019-06-14T16:17:59.153 回答
1

另一种选择是在 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")});

        });
于 2016-02-21T12:59:55.033 回答
1

你可以做两件事...

  1. 为每条路线添加虚拟路径以指向您的 spa 文件夹。
  2. 使用 IIS URL 重写模块。这是对您使用 SO 应用程序的长时间讨论，所以这里有一篇描述它的帖子 - http://weblogs.asp.net/owscott/rewrite-vs-redirect-what-s-the-difference
于 2016-02-21T07:24:45.943 回答