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

Question

好吧，所以我使用React和React-Router创建了一个SPA并将其推送到github页面，但是当我刷新或点击浏览器时，我编写的所有路由都没有。 当我在本地提供页面时，我遇到了同样的问题，但随后又回到了这个SO答案，并制作了一个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页面只设计为托管静态网站，但我看到有人暗示为每条路由创建静态页面的其他方法，例如这个reddit帖子中的答案，但我不知道该怎么做。

我还应该提一下，因为我已经在user-name.github.io有一个站点，所以这个站点正在user-name.github.io/projects上托管，这就是我的/路由。 我不知道这是否有任何区别，我只是想提一下。

我想我在gh-pages上尝试并成功托管这个选项时已经筋疲力尽了，我知道有一些项目像GitHub页面的单页应用程序试图解决这个问题但是，我只是想知道是否有人在那里在诉诸于此之前，我有幸做过这件事。

仅供参考，这是我的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

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

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

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

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

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

Answer 3

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

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

一个简洁的解决方案，但也没有生产准备。