React 浏览器路由器处理 F5 - 返回 404

Question

我已经从 HashRouter 切换到 BrowserRouter，并且所有导航都运行良好 - 除了 F5。

我明白为什么会失败....向 www.example.com/account 发送请求将导致 404，因为服务器上没有这样的路径。

根据我所阅读的内容，我需要添加一个包罗万象的内容。有点不确定这是解决方法。由于请求在到达我的 javascript SPA 之前到达服务器。

我的路由是这样的：

<Switch>
                <Route exact path="/" component={Dashboard} />
                <Route exact path="/accounts" component={Accounts} />
                <Route exact path="/accounts/:id" component={Accounts} />
                <Route exact path="/account" component={AccountEditor} />

但我觉得我需要修改一些较低的内容。我不确定这是否是服务器设置，因为刷新 www.example.com/accounts/ 将在服务器上强制执行 GET 并失败，甚至在它查看我的代码之前。

我想也许 webpack 是问题所在。但是当我使用 create-react-app 创建我的应用程序时，我找不到 webpack 文件。我不确定 create-react-app 是在哪里配置的。

如何处理 F5 或直接导航到不是 / 的网址？ 主机运行 IIS，所以我想知道是否有 web.config 规则或我可以使用的东西来允许 URL 中的路径 - 但总是从 / 获取？

Answer 1

React 构建包括静态文件，其中包括 .js 文件块和单个 index.html 文件。当您将其上传到传统的ngnix 服务器时，它会像在路由中一样查找文件。要覆盖它并使其工作，您需要使用.js 应用程序的静态文件服务器为您提供静态文件。我最常用的是一个名为serve 的npm 包。在安装node.js 之后，您可以在服务器上安装它：

npm i -g serve

然后您可以使用以下命令为您的应用程序提供服务：

serve folder_name

希望这对你有用。