Question

我没有找到解决此问题的方法，但是我尝试了各种解决方法，但是没有任何效果。我有一个React JS应用，当将其部署在测试服务器上时，您在页面上单击“刷新”时会收到404错误消息。我尝试了URL重写，这有助于导航回主页，但这不能解决刷新问题。请帮助。

Answer 1

您需要在重写配置中添加规则。这样您的React应用程序中的每个URL都会返回您的基础页面。

<rule name="PageRefresh" stopProcessing="true">
    <match url=".*" ignoreCase="false" />
    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">                        
        <add input="{URL}" pattern="/build(.*)" negate="true" />
        <add input="{URL}" pattern="/script(.*)" negate="true" />       
        <add input="{HTTP_HOST}" pattern="(YOUR_DOMAIN).com" />
    </conditions>
    <action type="Rewrite" url="/{C:1}/{C:1}.html" />
</rule>

Answer 2

This worked for me: 
      <rule name="ReactRouter Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          <add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" />
        </conditions>
        <action type="Rewrite" url="index.html" />
      </rule>
    </configuration>
Also making the sure the path in my has the correct test server path and this fixed it!
<Route path="/has/the/correct/testserver/path" component={testcomponent} />

Answer 3

对于使用Nextjs的用户，必须使用withRouter，如下所示：

import React, { Component } from "react";
import { withRouter } from 'next/router'

class Login extends Component {


    constructor(props) {
        super(props);
    }


    onClickHandler = (event) => {
        this.props.router.push('/newPage')

    }

    render() {
        return (

            <div>
                <p>Hello, {this.props.router.pathname}</p>
                <button onClick={this.onClickHandler}>Click me!</button>
            </div>
        );
    }
}

export default withRouter(Login);

Answer 4

我们也可以在项目的根目录中创建一个 web.config 文件来解决这个问题。

web.config 文件内容

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <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" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

当您点击刷新时，在IIS上反应路由404错误

4 个答案: