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

好吧，我已经使用React和React-Router制作了一个SPA，并将它推送到github页面，但是当我刷新或在浏览器中单击时，我写入的任何路线都没有工作。当我在本地提供页面时遇到了同样的问题，但后来跟进到this SO answer，并创建了一个server.js文件，该文件在每个路由处提供重定向到我的静态HTML页面。下面是该文件的样子：我可以用github-pages网站的react-router创建路由吗？

"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或。我知道这似乎是一个明显的问题，因为github页面仅设计为托管静态网站，但我曾看到有人暗示为其他方式创建每个路由的静态页面，例如this reddit post中的答案，但我不知道该怎么做。

我还应该提到，因为我已经有一个网站在user-name.github.io，所以这个网站正在主持user-name.github.io/projects，使得我的/路线。我不知道这是否有所作为，我只是想我应该提到它。

我想我已经用尽了每一个选项来尝试成功地在gh页面上托管这个项目，我知道有像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') 
    );

任何帮助，这将是非常赞赏&高兴，如果有帮助的，包括更多的代码。

来源

2016-11-24 Maxine Ellah

Express是一个后台框架编写API的路线...你怎么努力实现与GH静态网页？你想在另一个域中将页面指向api？ –

我用快递，因为那是什么在另一个建议SO回答，但，是的，我知道我不能包括任何这样的逻辑，当我把它推到GH-页面。试图查看是否有任何建议为每条路线创建一个静态页面。 –

我想你需要你的browserHistory更改为hashHistory ..所以你可以用生长激素使用它...它从/家使用hashHistory在接受建议的更改路径＃/家

来源

2016-11-25 03:23:08

谢谢！这工作完美。我读不推荐hashHistory生产，但是，就目前而言，这是一个很好的妥协，因为browserHistory需要我来配置服务器，在GH-网页托管时，这是不可能的。 –

除了回答，还有另一种解决方法。看看here。

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

一个整洁的解决方案，但没有生产就绪，无论是。

来源

2017-06-25 16:01:51 inker

如果您使用的创建 - 反应 - 应用程序（我没有在任何其他环境中测试这一点），你可以使用browserRouter，您将需要一个basename道具传递给组件与此环境变量：process.env.PUBLIC_URL。

您的路由器，现在应该是这样的：

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

欲了解更多信息，你可以检出该Github thread

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

来源

2017-11-21 18:37:36 randomguy04

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

回答

相关问题