ReactJs | React Router 与 IIS 返回错误“由于发生内部服务器错误，无法显示页面。”

Question

我们正在尝试使用以下 URL 模式路由网站：localhost:8185/variable1/variable2

我们已经使用react-router-dom完成了应用程序内的所有路由。如果我们在本地运行它，它可以工作，但是当我们尝试将它放在 IIS 上时，它会给出错误“页面无法显示，因为发生了内部服务器错误”。

到目前为止我们所做的：

1. 创建 web.config 文件：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Detailed" />
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
      <mimeMap fileExtension=".html" mimeType="text/html" />
      <!-- Adicione outros mapeamentos de MIME se necessário -->
    </staticContent>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
    <system.web>
        <identity impersonate="true" />
    </system.web>
</configuration>

我们尝试了没有 staticContent 的变体，但没有成功。

2. 确保 web.config 文件和 ApplicationPools 中的用户权限 (https://i.sstatic.net/xIKMOJiI.png)

3. 我们安装了URL重写2模块

App.js 文件：

import React from "react";

import Quote from "./Quote";

import { Routes, Route } from 'react-router-dom';


class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    render() {
        return (
            <Routes>
                <Route path="/:entity/:quoteId" element={<Quote {...this.props} />} />
            </Routes>
        )
    }
}

export default App;

Quote.js 文件：

function withHooks(WrappedComponent) {
    return function (props) {
        const { entity, quoteId } = useParams()
        const [theme, colorMode] = useMode()
        const colors = tokens(theme.palette.mode)

        return (
            <WrappedComponent colors={colors} colorMode={colorMode} theme={theme} {...props} entity={entity} quoteId={quoteId} />
        )
    }
}


class App extends React.Component {
    constructor(props) {
        super(props)

        let entity = this.props.entity
        let quoteId = this.props.quoteId

我已经遇到这个错误超过 2 天了，我已经看过另一篇文章“https://stackoverflow.com/questions/929131/how-do-i-resolve-http-error-500- 19-internal-server-error-on-iis7-0”，但没有成功。

如果您需要任何其他信息，请告诉我。

Answer 1

您可以尝试以下步骤在 iis 上部署 React 应用程序：

1）确保您已安装以下软件包：

npm install

npm install react-router-dom

2）下面是我的示例代码：

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

app.js：

 import React from "react";
    import { Routes, Route } from 'react-router-dom';
    import Quote from "./Quote";
    
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
        }
    
        render() {
            return (
                <Routes>
                    <Route path="/:entity/:quoteId" element={<Quote {...this.props} />} />
                </Routes>
            );
        }
    }
    
    export default App;

Quote.js:

import React from 'react';
import { useParams } from 'react-router-dom';

function useMode() {
    // Mock implementation of useMode
    const [theme, setTheme] = React.useState({ palette: { mode: 'light' } });
    const [colorMode, setColorMode] = React.useState('light');
    return [theme, colorMode];
}

function tokens(mode) {
    // Mock implementation of tokens
    return mode === 'light' ? { primary: '#ffffff', secondary: '#000000' } : { primary: '#000000', secondary: '#ffffff' };
}

function withHooks(WrappedComponent) {
    return function (props) {
        const { entity, quoteId } = useParams();
        const [theme, colorMode] = useMode();
        const colors = tokens(theme.palette.mode);

        return (
            <WrappedComponent colors={colors} colorMode={colorMode} theme={theme} {...props} entity={entity} quoteId={quoteId} />
        );
    }
}

class Quote extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            entity: this.props.entity,
            quoteId: this.props.quoteId
        };
    }

    render() {
        const { entity, quoteId, colors, colorMode, theme } = this.props;

        return (
            <div style={{ backgroundColor: colors.primary, color: colors.secondary }}>
                <h1>Quote Component</h1>
                <p>Entity: {entity}</p>
                <p>Quote ID: {quoteId}</p>
                <p>Theme Mode: {theme.palette.mode}</p>
                <p>Color Mode: {colorMode}</p>
            </div>
        );
    }
}

export default withHooks(Quote);

3）现在运行构建命令来构建应用程序：

npm run build

4）在iis中创建站点并设置以下值：

站点路径：E:\my-react-app uild

站点绑定：http端口：例如805

5）web.config文件：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" logRewrittenUrl="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>
 

6）将iis_iusrs和iusr的权限设置为站点根文件夹E:\my-react-app