我可以使用 react-router 为 github-pages 站点创建路由吗? [英] Can I create routes with react-router for a github-pages site?

问题描述

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

Ok, so I've made a SPA using React and React-Router and have pushed it to github pages, but none of the routes I have written work when I refresh or click back in my browser. I had the same problem when I was serving the page locally, but then followed along to this SO answer and made a server.js file which provided a redirect to my static HTML page at each route. Here is what the file looks like:

"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 帖子，但我不知道该怎么做.

Now, my problem is that when I push the project to github pages all of that logic is ignored, github's routing takes over and I have the same problem of not being able to refresh or go straight to /contact or /about. I know it seems like an obvious problem to run into, since github pages is designed to only host static sites, but I've seen people hinting towards other ways of creating a static page for each route, such as the answer in this reddit post, but I have no idea how to do that.

我还应该提到，因为我已经在 user-name.github.io 上建立了一个站点，所以该站点托管在 user-name.github.io/projects，使我的 / 路线.我不知道这是否有什么不同，我只是觉得我应该提一下.

I should also mention that because I already have a site at user-name.github.io, so this site is being hosted at user-name.github.io/projects, making that my / route. I have no idea if this makes any difference, I just thought I should mention it.

我想我已经用尽了所有尝试并成功在 gh-pages 上托管它的选项，我知道有像 GitHub Pages 的单页应用程序 尝试解决这个问题，但是，我只是想看看是否有人在诉诸那个之前有幸这样做过.

I think I've pretty much exhausted every option to try and successfully host this on gh-pages and I know there are projects like Single Page Apps for GitHub Pages to try and fix this issue but, I just wanted to see if anyone out there has had any luck doing this before resorting to that.

仅供参考，这是我的app.js(包含路由逻辑):

FYI, here is my app.js (containing routing logic):

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

对此的任何帮助将不胜感激 &如果有帮助，很高兴包含更多代码.

Any help with this would be much appreciated & happy to include more code if helpful.

推荐答案

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

I think you need to change your browserHistory to a hashHistory.. so you can use it with gh... it changes path from /home to #/home

这篇关于我可以使用 react-router 为 github-pages 站点创建路由吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！