时间戳

首页 > 解决方案 > React 浏览器路由器处理 F5 - 返回 404

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

问题描述

我已经从 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，或直接导航到不是 / 的 url？主机运行 IIS，所以我想知道是否有 web.config 规则或我可以使用的东西来允许 URL 中的路径 - 但总是从 / 获取？

标签： reactjs

解决方案

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

npm i -g serve

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

serve folder_name

希望这对你有用。

推荐阅读