我可以使用 react-router 为 github-pages 站点创建路由吗？

Posted 2023-02-19

【中文标题】我可以使用 react-router 为 github-pages 站点创建路由吗？

【英文标题】：Can I create routes with react-router for a github-pages site?

【发布时间】：2017-04-08 04:22:08

【问题描述】：

好的，所以我使用 React 和 React-Router 制作了一个 SPA，并将其推送到 github 页面，但是当我在浏览器中刷新或单击返回时，我编写的所有路由都不起作用。我在本地提供页面时遇到了同样的问题，但随后转到this SO answer 并制作了一个 server.js 文件，该文件在每个路由处提供了对我的静态 html 页面的重定向。这是文件的样子：

"use strict";
let express = require('express');
let path = require('path');


let app = express();

app.use(express.static('public'));

app.get('/contact', function(req, res)
  res.sendFile('public/index.html',  root: __dirname );
)

app.get('/about', function(req, res)
  res.sendFile('public/index.html',  root: __dirname );
)

app.get('*', function(req, res)
  res.sendFile('public/index.html',  root: __dirname );
)

app.listen(8080, function()
  console.log('Listening on port 8080!')
)

现在，我的问题是，当我将项目推送到 github 页面时，所有这些逻辑都被忽略了，github 的路由接管了，我遇到了同样的问题，即无法刷新或直接访问 /contact 或 @987654326 @。我知道这似乎是一个明显的问题，因为 github pages 旨在仅托管静态站点，但我看到人们暗示为每个路由创建静态页面的其他方法，例如 this reddit post 中的答案，但我不知道该怎么做。

我还应该提到，因为我已经有一个位于 user-name.github.io 的站点，所以这个站点托管在 user-name.github.io/projects，这就是我的 / 路由。我不知道这是否有什么不同，我只是想我应该提一下。

我想我已经用尽了所有选项来尝试在 gh-pages 上成功托管它，我知道有像 Single Page Apps for GitHub Pages 这样的项目来尝试解决这个问题，但是我只是想看看是否有人在那里在诉诸于此之前，我有幸做到了这一点。

仅供参考，这是我的 app.js（包含路由逻辑）：

import React, Component from 'react';
import render from 'react-dom';
import Router, Route, browserHistory, IndexRoute from 'react-router';
//Import custom components
import About from '../components/about.js';
import Contact from '../components/contact.js';
import Sidebar from '../components/sidebar.js';
import Imagelist from '../components/image-list.js';


  render(
      <Router history=browserHistory>
        <Route path="/" component=Sidebar>
          <IndexRoute component=Imagelist/>
          <Route path="/about" component=About/>
          <Route path="/contact" component=Contact/>
        </Route>
      </Router>,
      document.getElementById('content')
    );

对此的任何帮助将不胜感激，如果有帮助，我们很乐意包含更多代码。

【问题讨论】：

express 是一个用于编写 api 路由的后端框架......你想用 gh 静态页面实现什么？你想 gh 页面指向另一个域中的 api？

我使用了 express，因为这是另一个 SO 答案中所建议的，但是是的，我知道当我将它推送到 gh-pages 时我不能包含任何这些逻辑。只是想看看是否有任何关于为每条路线创建静态页面的建议。

【参考方案1】：

我认为您需要将 browserHistory 更改为 hashHistory.. 这样您就可以将其与 gh 一起使用...它将路径从 /home 更改为 #/home

【讨论】：

谢谢！那工作得很好。我读到不建议将 hashHistory 用于生产，但就目前而言，这是一个很好的折衷方案，因为 browserHistory 需要我配置服务器，而在 gh-pages 上托管时这是不可能的。

【参考方案2】：

除了按照接受的答案中的建议使用 hashHistory 之外，还有另一种解决方法。看here。

基本上，您创建了一个欺骗404.html 文件，该文件有一个脚本，该脚本将请求的路径转换为查询字符串并将浏览器重定向到带有附加到URL 的查询字符串的索引页面。加载索引文件后，从查询字符串中恢复原始路径，ReactRouter 获取更改。

一个简洁的解决方案，但也不是生产就绪的。

【参考方案3】：

如果你使用 create-react-app（我没有在任何其他环境中测试过）你可以使用browserRouter，你需要通过这个环境变量传递一个basename 属性给组件：@ 987654324@.

您的路由器现在应该如下所示：

<BrowserRouter basename=process.env.PUBLIC_URL>
  /* routes */
</BrowserRouter>

有关更多信息，您可以查看此Github thread

在您的路由定义中使用 process.env.PUBLIC_URL，以便它们在开发和部署后都可以工作。例如： 。这在开发中将是空的，而在生产中...（从主页推断）。

【讨论】：

有谁知道这在没有 create-react-app 的情况下是否有效？我正在使用包裹

【参考方案4】：

我刚刚找到了一个不使用 HashRouter 的解决方案。我创建了一个在我的部署脚本之前调用的小节点脚本，该脚本创建了一个与 index.html 内容相同的 404.html 文件。如果您在 react-app 中的页面上刷新，Github 页面会提供该文件。

const fs = require('fs')
fs.copyFile('build/index.html', 'build/404.html', (err) => 
  if (err) throw err
  console.log('index.html was copied to 404.html')
)

【参考方案5】：

为了扩展 Jildert 的回答，我做了同样的事情 - 在部署到 github 页面之前将 index.html 复制到 404.html 并且它起作用了。

所以我刚刚更新了 package.json 的 pre-deploy 部分以包含此复制操作，现在它可以与 BrowserRouter 一起正常工作：

"predeploy": "npm run build && cp build/index.html build/404.html",
"deploy": "gh-pages -d build"