Question

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

问题是，当我通过在Visual Studio Code上使用“ npm start”启动应用程序时，它工作正常，但在IIS中，它显示未找到页面。

当我通过Visual Studio Code启动时，这是我的网址： http://localhost:3000/Test/TestRouter（运行正常，然后按F5键）。

在IIS上发布时的URL： 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之后重新加载页面而不会出现此错误？

谢谢你。

Answer 1

在IIS中，您可以使用重写模块来教Web服务器通过返回主 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>

希望有帮助！

Answer 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

反应：在部署到IIS后刷新页面时找不到页面

2 个答案: