github 페이지 사이트에 대한 react-router로 경로를 만들 수 있는가?

github 페이지 사이트에 대한 react-router로 경로를 만들 수 있는가?

좋아, 반응 및 반응 라우터를 사용하여 SPA를 만들어 Github 페이지에 넣었지만 브라우저를 새로 고치거나 다시 클릭할 때 작성한 루트는 하나도 없어.나는 페이지를 로컬로 서비스할 때도 같은 문제가 있었지만, 이 SO 답변을 따라 각 경로에서 내 정적 HTML 페이지로 리디렉션을 제공하는 server.js 파일을 만들었다.파일 모양은 다음과 같다.

"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또는/aboutGithub 페이지는 정적 사이트만 호스팅하도록 설계되어 있기 때문에 부딪히는 것이 명백한 문제인 것 같다는 것을 알지만, 나는 사람들이 이 redit 포스트의 답과 같이 각 경로에 대해 정적 페이지를 만드는 다른 방법을 암시하는 것을 보아왔지만, 나는 어떻게 해야 할지 모르겠다.

나도 그 점을 언급해야겠다. 왜냐하면 나는 이미 에 사이트를 가지고 있기 때문이다.user-name.github.io, 그래서 이 사이트는 다음에서 호스트되고 있다.user-name.github.io/projects, 그것을 나의 것으로 만들기./경로. 이게 무슨 차이가 있는지 모르겠어. 그냥 언급해야겠다고 생각했어.

나는 이것을 gh-page에서 성공적으로 호스팅하기 위해 모든 옵션을 다 써버렸다고 생각한다. 그리고 나는 이 문제를 해결하기 위한 싱글 페이지 앱 같은 프로젝트가 있다는 것을 알지만, 나는 그것에 의존하기 전에 누군가 이 일을 해 본 적이 있는지 알고 싶었다.

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

이것에 대한 어떤 도움도 감사하고 도움이 된다면 코드를 더 많이 포함시킬 수 있어 행복할 것이다.

브라우저 히스토리를 해시 히스토리로 변경해야 할 것 같아.gh와 함께 사용할 수 있도록...그것은 /home에서 #/home으로 경로를 바꾼다.

사용과는 별도로hashHistory승인된 답변에서 제시된 바와 같이, 또 다른 해결 방법이 있다.여기 봐.

기본적으로 스푸핑을 생성하는 경우404.html요청된 경로를 쿼리 문자열로 변환하고 URL에 연결된 쿼리 문자열을 사용하여 브라우저를 인덱스 페이지로 리디렉션하는 스크립트를 가진 파일. 인덱스 파일이 로드된 후 쿼리 문자열에서 원래 경로가 복원된다.ReactRouter거스름돈을 챙기다

깔끔한 솔루션이지만, 생산 준비도 안 된 제품.

Create-react-app을 사용하는 경우(다른 환경에서 테스트하지 않은 경우)browserRouter, 당신은 a를 통과해야 할 것이다.basename이 환경 변수가 있는 구성 요소에 대한 받침:process.env.PUBLIC_URL.

이제 라우터가 다음과 같이 표시되어야 함:

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

자세한 내용은 이 Github 스레드를 체크아웃하십시오.

process.env를 사용한다.개발 및 배포 후 모두 작동하도록 경로 정의에 PROPL_URL.예: .이것은 개발에서는 공허하고 생산에서는 ...(홈페이지에서 도입)될 것이다.

해쉬루터를 사용하지 않고 이 문제에 대한 해결책을 찾았어.인덱스.html과 동일한 내용의 404.html 파일을 생성하는 배포 스크립트 앞에 호출되는 작은 노드 스크립트를 생성했다.당신이 리액션 앱의 페이지에서 새로 고치면 Github 페이지는 그 파일을 제공한다.

const fs = require('fs')
fs.copyFile('build/index.html', 'build/404.html', (err) => {
  if (err) throw err
  console.log('index.html was copied to 404.html')
})

Jildert의 대답을 확장하기 위해, Github 페이지에 배치하기 전에 동일한 - copyed index.html을 404.html로 했는데, 효과가 있었다.

그래서 나는 방금 패키지의 사전 배포 섹션을 업데이트했다.이 복사 작업을 포함하기 위해 json은 BrowserRouter:

"predeploy": "npm run build && cp build/index.html build/404.html",
"deploy": "gh-pages -d build"

참조URL: https://stackoverflow.com/questions/40776651/can-i-create-routes-with-react-router-for-a-github-pages-site