我可以为github-pages网站创建带react-router的路由吗? [英] Can I create routes with react-router for a github-pages site?
问题描述
好的,所以我使用React和React-Router创建了一个SPA并将其推送到github页面,但是当我刷新或点击浏览器时,我编写的所有路由都没有。当我在本地提供页面时,我遇到了同样的问题,但接着是这个SO答案并制作了一个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页面的单页应用程序试用并解决了这个问题但是,我只是想看看是否有人在采取这种做法之前有任何运气。
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.
仅供参考,这是我的应用程序.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
这篇关于我可以为github-pages网站创建带react-router的路由吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!