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

Question

好的，所以我已经使用React和React-Router制作了一个SPA并将其推送到github页面，但是刷新或在浏览器中单击时，我编写的所有路由都没有。当我在本地为页面提供服务时，我遇到了同样的问题，但是随后遵循了这个答案，并制作了一个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的路由接管了我，同样出现了无法刷新或直接访问/contactor的问题/about。我知道这似乎是一个显而易见的问题，因为github页面仅设计为承载静态站点，但是我看到人们暗示了为每种路线创建静态页面的其他方式，例如此reddit帖子中的答案，但我不知道该怎么做。

我还要提到的是，由于我已经在拥有一个站点user-name.github.io，因此该站点托管在上user-name.github.io/projects，这就是我的/路线。我不知道这有什么不同，我只是想提一提。

我想我几乎已经穷尽了所有尝试将其成功托管在gh-pages上的选项，并且我知道有诸如适用于GitHub Pages的Single Page Apps的项目可以尝试解决此问题，但是，我只是想看看是否有人在诉诸于此之前，做过任何运气。

仅供参考，这是我的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已接受答案中的建议使用之外，还有另一种解决方法。看这里。

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

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