React：部署到 IIS 后刷新页面时找不到页面答案

【问题标题】：React: page not found when refresh page after deployed to IISReact：部署到 IIS 后刷新页面时找不到页面
【发布时间】：2019-12-24 06:41:49
【问题描述】：

我将一个 React 应用程序部署到 IIS，它显示 OK，但是当我按 F5 重新加载页面时，它显示页面未找到。

问题是，当我在 Visual Studio Code 上使用“npm start”启动应用程序时，它运行良好，但在涉及 IIS 时，它显示找不到页面。

这是我从 Visual Studio Code 开始时的网址： http://localhost:3000/Test/TestRouter（工作正常，F5 OK）。

我在 IIS 上发布时的网址： http://localhost/Test/TestRouter（在首次加载和 F5 显示未找到页面时工作）。

这是我的代码：

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Test from './Test';
import { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import dotenv from 'dotenv';
require('dotenv').config()

function App() {
  return (
    <div className="App" >
      <Router basename='/Test'>
        <div>
          <nav>
            <Link to="/TestRouter">Test</Link>
          </nav>
          <Switch>
            <Route path="/TestRouter" component={Test} />
          </Switch>
        </div>
      </Router>
    </div>
  );
}

export default App;

Test.js

import React from 'react';

class Test extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <p>Hello world</p>
            </div>
        );
    }
}

export default Test;

package.json

"homepage": "http://localhost/Test/"

有没有人可以帮助我，以便我可以在部署到 IIS 后重新加载页面而不会出现此错误？

先谢谢你了。

【问题讨论】：

我觉得你需要添加.htaccess - docs.microsoft.com/en-us/iis/application-frameworks/…

标签： reactjs iis

【解决方案1】：

在 IIS 中，您可以使用 rewrite 模块 来教导网络服务器通过返回您的主 index.html 文件来响应所有 url。

Reference here

Web.config

<rewrite>
    <rules>
        <rule name="SPA Routes" stopProcessing="true">
        <!-- match everything by default -->
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
            <!-- unless its a file -->
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <!-- or a directory -->
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <!-- or is under the /api directory -->
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
            <!-- list other routes or route prefixes here if you need to handle them server side -->
        </conditions>
        <!-- rewrite it to /index.html -->
        <action type="Rewrite" url="/index.html" />
        </rule>
    </rules>
</rewrite>

希望对你有帮助！！！

【讨论】：

【解决方案2】：

您可以使用HashRouter。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Test from './Test';
import { Link, Route, Switch, HashRouter} from 'react-router-dom';
import dotenv from 'dotenv';
require('dotenv').config()

function App() {
  return (
    <div className="App" >
      <HashRouter basename='/Test'>
        <div>
          <nav>
            <Link to="/TestRouter">Test</Link>
          </nav>
          <Switch>
            <Route path="/TestRouter" component={Test} />
          </Switch>
        </div>
      </HashRouter>
    </div>
  );
}

export default App;

这是解决这个问题的简单方法，但是url中会有一个'#'。

示例：

http://localhost/Test/#/TestRouter

【讨论】：