前言
前端技术日新月异，现代的 Web 应用已经逐渐转向单页面应用 (SPA)。SPA 通过 JavaScript 动态渲染页面，用户不需要每次点击都重新加载整个页面，从而可以提高用户的体验感。但是，SPA 也带来了新的问题，比如页面刷新时 URL 不改变、不利于 SEO 等。
幸好，现在有很多路由管理工具可以解决这种问题，比如 React-Router。React-Router 是 React 的一部分，提供了对浏览器 URL 的修改和响应能力，使得你可以采用 SPA 的方式开发想要的应用程序。此外，React-Router 还可以帮助我们解决 URL 改变时前端页面路由跳转的问题。
然而，还有一个问题需要解决：如何将 SPA 部署到正式环境中的 Nginx 服务器上？许多开发人员都选择使用 Nginx 反向代理来实现这个目标，但是这种方法需要配置很多参数，最重要的是配置文件本身就变得更加复杂。
本文将向你介绍如何使用 React-Router 部署单页面应用到 Nginx 服务器上，同时不需要配置 Nginx 反向代理。
Nginx 部署单页面应用的思路
我们通常将 SPA 中较重的资源都打包成静态文件，比如打包 JavaScript 文件、CSS 文件、图片等，然后使用 Nginx 将 React-Router 路由到这些文件上，直接读取资源文件，这样减轻了服务器的压力，为页面的快速加载提供了保障。
但是，我们在部署单页面应用时需要配置 Nginx ， 在每一个 React-Router 操作时进行跳转 ， 这会导致一个问题：Nginx 会在每个 React-Router 操作后验证该操作对应的静态资源是否存在，这就导致了性能上的不必要消耗。因此，我们考虑在 React-Router 中实现 Nginx 的路由功能，直接返回对应的静态资源。
React-Router 路由设置
我们先来看一下 React-Router 的路由设置。首先，在你的应用程序主文件中引入 React-Router：
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ - ------ ---------- - ---- -------------------
------ -------- ---- ------------
------ --- ---- --------
----------------
------------
------ -------- --------------- --
--------------
-------------------------------
--上述代码使用 HashRouter 加载整个应用程序，并设置主路由 (path="/") 的组件为 App。你可以在 App.js 文件中定义具体的页面组件。
-- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ - ----- - ---- -------------------
------ -------- ---- -------------
------ --------- ---- --------------
-------- ----- -
------ -
---- ----------------
------ ----- -------- -------------------- --
------ ------------- --------------------- --
------
--
-
------ ------- ----上述代码通过 Route 定义两个页面：主页 (exact path="/") 和其他页面 (path="/other")。
现在我们来实现 React-Router 与 Nginx 的应用程序路由跳转。
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ - ----------- ----- - ---- -------------------
------ -------- ---- ------------
------ --- ---- --------
----- -------------- - -- -- -----
----------------
------------
------ -------- -------------------------- --
------ ------------- -------------------------- --
------ ----- ------------------ --------------- --
--------------
-------------------------------
--这段代码中的新组件 EmptyComponent 函数仅仅是一个空的函数组件，不会渲染任何东西。我们在 HashRouter 中添加 EmptyComponent 组件，并在其下添加两个 Route，对应着两个页面组件。注意，这里的 Route 把 “/” 和 “/other” 统一路由到了 EmptyComponent 容器中，目的是为了防止请求重复匹配，降低服务器负担。最后我们定义一个 index.html 的具体页面组件作为默认页面 (exact path="/index.html")。
Nginx 的静态资源配置
现在，我们来直接使用 Nginx 提供 React-Router 路由与静态资源的方式。我们不再需要配置任何反向代理来映射地址，而是直接把资源地址写在 Nginx 配置文件中，这样就能避免一些性能问题。
-- -------------------- ---- -------
------ -
------ ---
----------- ------------
-------- - -
---- ---------------------------------
--------- ---- -----------
-
-注意，在这里我们只需要将资源路径放在反向代理 selector 中，这样就能直接访问对应的文件了。
总结
本文展示了如何使用 React-Router 在 Nginx 服务器上不需要配置反向代理就可以部署单页面应用的技巧。我们讲解了 React-Router 实现路由的方式，并用 Nginx 的静态资源服务地址来访问对应的前端静态资源，这样可以让前端开发人员无需特意去匹配静态资源和路由，降低了服务器负担，让前端开发人员更加专注于写出好的应用代码。希望这篇文章能对你有所帮助，也希望你能在实际项目中加以实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd1bb595b1f8cacdcbb845