我可以用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創建路由嗎？

回答

相關問題