react更改路由入参_将您的React网站部署到GitHub Pages

我已经在周末结束了我的投资组合网站，并希望将其部署到GitHub Pages。但是，我认为这不是一件容易的事。我构建了一个React应用，该应用使用动态路由来显示具有唯一链接的不同页面，并希望将其托管在GitHub Pages上。我遇到了一些问题，想和大家分享一下我的经历。

我假设您已经拥有可以正常使用的React应用程序(与使用 create-react-app 创建的应用程序一样)，并且托管在GitHub的存储库中。让我们开始吧。

首先，在您的应用目录中安装 gh-pages 模块：

$ npm i gh-pages

现在，您必须添加部署配置。转到您的 package.json 文件进行一些编辑。

下一步做什么编辑取决于您是创建项目网站还是用户/组织网站。您可以根据需要在GitHub Pages上创建任意数量的项目站点。他们的地址将具有以下格式：https://username.github.io/repository。

另一方面，每个帐户只能有一个用户网站，它将有一个更漂亮的地址：https://username.github.io。

如果要创建项目站点

下面是你必须在 package.json 里面做的事情：

• 添加您的主页地址(在 dependencies 之前)：“homepage”：“http://username.github.io/repository”
• 在 script 中添加命令以创建生产构建并进行部署：“predeploy”：“npm run build” 和 “deploy”：“gh-pages -d build”

这个 package.json 文件应该是这样的。(不要忘记使用正确的值来代替用 username和repository！)

{  "name": "YourReactApp",   ...  "homepage": "https://username.github.io/repository",   ...  "scripts": {     ...    "predeploy": "npm run build",    "deploy": "gh-pages -d build",     ...  }}

要部署，您所要做的就是在终端中运行以下命令：

$ npm run deploy

我们差不多了，如果你转到GitHub上的repo，你会注意到一个新的分支，叫做 gh-pages，它已经被创建了。这是为你的网站服务的网点。从GitHub上的repo主页转到Settings。您将在页面的末尾找到GitHub Pages部分。选择gh-pages 分支作为GitHub页面网站的源。

好极了！现在，您可以实时查看您的网站！如果您在应用中使用路由，则还有另一件事要做，因此请继续阅读(您可以通过下一节)。

每个帐户只能有一个用户站点，该站点的存储库应具有特定名称。您的应用程序库的名称应为username.github.io。如果您已经使用其他名称，请放心！导航到GitHub上的存储库主页，然后单击“Settings”。然后，在“Repository Name”标题下，键入新名称：username.github.io(当然使用您自己的用户名)。

当您仍在“Settings”页面上时，向下滚动到页面底部到GitHub Pages标题。您会注意到，与项目页面不同，用户页面只能从 master 分支提供。这需要对分支以及我们在 package.json 中配置部署的方式进行一些更改。

首先，让我们将主分支上的内容移动到一个新分支上。我们称之为source：

$ git checkout -b source$ git push origin source

返回仓库的“Settings”页面，单击左侧菜单中的“Branches”，然后将“Default branch ”更改为 source，然后单击“Update”。

接下来，在 package.json 中配置用户网站的部署：

• 添加您的主页地址(在依赖项(dependencies)之前)：“homepage”：“http://username.github.io/”
• 在 scripts 中，添加命令以在 master 分支上创建生产版本并部署：“predeploy”：“npm run build” 和 “deploy”：“gh-pages -b master -d build”

package.json 文件应如下所示。 (不要忘记使用用户名值代替username！)：

{  "name": "YourReactApp",   ...  "homepage": "https://username.github.io/",   ...  "scripts": {     ...    "predeploy": "npm run build",    "deploy": "gh-pages -b master -d build",     ...  }}

要部署，您所要做的就是在终端中运行以下命令：

$ npm run deploy

---

让我们谈谈路由

我使用React Router让我的网站看起来就像有独立的页面和唯一的地址。我按照上面介绍的步骤将其部署为GitHub用户站点，这些链接似乎工作正常。当我点击刷新时，我正在其中的一个页面上，页面消失了，取而代之的是一个404页面。尝试通过直接输入其地址来访问页面(而不是从首页开始导航)会得到相同的结果。在生产环境中，新的页面加载似乎无法检索页面(而在开发环境中却可以正确地处理它)。

似乎有两种方法可以解决此问题(请参阅客户端路由和GitHub Pages上的此说明)。一种是使用React的 而不是 。另一个是处理404，并将它们重定向到正确的页面。我采用了第二种解决方案，使用了这个仓库(https://github.com/rafrex/spa-github-pages)上提供的代码(和解释)。

两个简单的步骤：

• 将 404.html 文件从该存储库复制到项目的 /public 目录(紧靠 index.html)。在404.html的脚本中可能需要设置一个变量 segmentCount。对于GitHub页面的用户站点，segmentCount = 0 就可以了。
• 将此处找到的脚本(行：58–88)复制到 /public/index.html 中的 部分。

就是这样。部署($ npm run deploy)，您的链接应该可以正常工作。

---

本头条号聚焦大前端技术和程序员成长，如果对你有所启发和帮助，可以点个关注、收藏，也可以留言讨论，这是对作者的最大鼓励。

作者简介：Web前端工程师，全栈开发工程师、持续学习者。

#GitHub# #React#