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

Question

好的，所以我使用 React 和 React-Router 制作了一个 SPA，并将其推送到 github 页，但是当我刷新或单击时，我编写的 none 路由有效回到我的浏览器。当我在本地提供页面时，我遇到了同样的问题，但随后继续并制作了一个 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 或 /about。我知道这对运行来说似乎是一个明显的问题，因为 github 页面被设计为仅托管静态站点，但我看到有人暗示用其他方法为每个路由创建静态页面，例如 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')
    );

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

Answer 1

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

Answer 2

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

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

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

Answer 3

如果你正在使用 create-react-app（我没有在任何其他环境中测试过）你可以使用 browserRouter，你需要将 basename prop 传递给组件使用此环境变量：process.env.PUBLIC_URL.

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

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

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

Use process.env.PUBLIC_URL in your route definitions so that they work both in development and after deployment. For example: . This will be empty in development and ... (inferred from homepage) in production.

Answer 4

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

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')
})

Answer 5

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

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

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

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

Can I create routes with react-router for a github-pages site?

javascript

url-routing

github-pages

single-page-application

react-router