Могу ли я создавать маршруты с помощью реактивного маршрутизатора для сайта github-pages?

Question

Итак, я создал SPA, используя React и React-Router, и перенаправил его на страницы github, но ни один из маршрутов, которые я написал, не работает, когда я обновляюсь или нажимаю обратно в своем браузере. У меня была такая же проблема, когда я показывал страницу локально, а затем следил за ней до this SO answer и сделал файл 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 предназначены для размещения только статических сайтов, но я видел, как люди намекали на другие способы создания статической страницы для каждого маршрута, например ответ в this reddit post, но Я не знаю, как это сделать.

Следует также упомянуть об этом, потому что у меня уже есть сайт по адресу user-name.github.io, поэтому этот сайт размещается по адресу user-name.github.io/projects, что делает мой маршрут /. Я понятия не имею, если это имеет значение, я просто подумал, что должен упомянуть об этом.

Я думаю, что я довольно сильно исчерпал каждый вариант, чтобы попытаться успешно разместить это на gh-страницах, и я знаю, что есть проекты, такие как Single Page Apps for GitHub Pages, чтобы попытаться исправить эту проблему, но я просто хотел посмотреть, есть ли у кого там если удастся это сделать, прежде чем прибегать к этому.

FYI, вот мой 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 ... это меняет путь из/дома #/дома

Answer 2

Помимо использования hashHistory как предложено в принятой ответ, есть другое обходное решение. Посмотрите here.

В принципе, вы создаете файл spoof 404.html, в котором есть скрипт, который преобразует запрошенный путь в строку запроса. & перенаправляет браузер на индексную страницу с строкой запроса, прикрепленной к URL-адресу. После загрузки индексного файла исходный путь восстанавливается из строки запроса & берет изменения.

Удобное решение, но не готовое к производству.

Answer 3

Если вы используете создать реагирующий-приложение (я не проверял это в любой другой среде), вы можете использовать browserRouter, вам нужно будет пройти basename подпорку к компоненте с помощью этой переменной ENV: process.env.PUBLIC_URL.

Ваш маршрутизатор должен выглядеть следующим образом:

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

Для получения дополнительной информации вы можете посетить этот Github thread

Используйте process.env.PUBLIC_URL в определениях маршрутов, чтобы они работали как в процессе разработки, так и после развертывания. Например: . Это будет пустым в разработке и ... (выводится с домашней страницы) в производство.