通过以下对nginx配置的简单更改，我能够克服硬刷新web应用程序中断和手动URL输入web应用程序中断。

React版本:17.0.2 Web服务器:nginx 操作系统:Ubuntu Server 20.04 (Focal Fossa)

之前

location / {
    try_files $uri $uri/ =404;
}

后

location / {
    try_files $uri /index.html;
}

也许还有其他的解决方法，但是这个方法对我来说非常快速和节省时间。

对于React Router V4用户:

如果您试图通过其他答案中提到的哈希历史技术来解决这个问题，请注意

<Router history={hashHistory} >

在V4中不能工作。请改用HashRouter:

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

参考:HashRouter

在我的情况下，URL没有加载时，我使用一个参数。

作为权宜之计，我补充道 <基地href = " < yourdomain / IP > " > < /基础> 在build文件夹中index.html文件的<title>标签下。

这刚好解决了我的问题。

对于使用iis10的用户，您应该这样做来纠正错误。

确保你使用了browserHistory。作为参考，我会给出路由的代码，但这不是最重要的。重要的是下面组件代码之后的下一步:

class App extends Component {
    render() {
        return (
            <Router history={browserHistory}>
                <div>
                    <Root>
                        <Switch>
                            <Route exact path={"/"} component={Home} />
                            <Route path={"/home"} component={Home} />
                            <Route path={"/createnewproject"} component={CreateNewProject} />
                            <Route path={"/projects"} component={Projects} />
                            <Route path="*" component={NotFoundRoute} />
                        </Switch>
                    </Root>
                </div>
            </Router>
        )
    }
}
render (<App />, window.document.getElementById("app"));

由于问题是IIS从客户端浏览器接收请求，它将把URL解释为请求一个页面，然后返回一个404页面，因为没有任何可用的页面。做以下几点:

打开IIS 展开“服务器”，然后打开“站点文件夹” 点击网站/应用程序 进入错误页面 在列表中打开404错误状态项 将“将静态文件中的内容插入到错误响应中”选项改为“在此站点上执行URL”，并在URL中添加“/”斜杠值。

现在可以正常工作了。

这里有一个简单、清晰和更好的解决方案。如果你使用网络服务器，它就可以工作。

每个web服务器都有能力在出现HTTP 404时将用户重定向到错误页面。要解决此问题，需要将用户重定向到索引页。

如果您使用Java基础服务器(Tomcat或任何Java应用程序服务器)，解决方案可能如下:

web . xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- WELCOME FILE LIST -->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

    <!-- ERROR PAGES DEFINITION -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.jsp</location>
    </error-page>

</web-app>

例子:

得到http://example.com/about web服务器抛出HTTP 404，因为此页面在服务器端不存在 错误页面配置通知服务器将index.jsp页面发送回用户 那么JavaScript将在客户端完成剩下的工作，因为客户端的URL仍然是http://example.com/about。

就是这样。不再需要魔法:)

刷新DOM组件后无法得到403错误，这很简单。

只需在Webpack配置中添加这一行，'historyApiFallback: true '。这帮了我一整天的忙。