1

반응 라우터를 사용하여 경로를 정의하고 있습니다. 그리고 개발을 위해 create-react-app을 사용하고 있습니다. 내 질문에 만약 내가 주소 표시 줄에 subpages에 대한 URL을 입력하고 그것을 개발 빌드에서 작동하지만 제작 빌드에 방문하려고합니다. 난 당신이 정의한 모든 경로에 대해 동일한 페이지를 제공, 또는 반작용의 렌더링 서버 측을 구현하기 위해 당신은 당신의 웹 서버를 구성해야합니다페이스 북의 Create-Reaction-App 빌드에서 반응 경로가 작동하지 않습니다.

var express = require('express'), 
    app = express(), 
    http = require('http'), 
    httpServer = http.Server(app); 

app.use(express.static(__dirname + '/build')); 

app.get('/', function(req, res) { 
    res.sendfile(__dirname + '/index.html'); 
}); 
app.listen(3001); 
+0

어떤 URL을 사용합니까? 주요 사이트 - yourdomain.com/ 또는 하위 페이지 - yourdomain.com/some/page/123? –

+0

@HoriaComan 서브 페이지 – Bhuthaya

답변

4

을 구축 생산을 호스팅 AA 간단한 표현 서버를 사용하고

. 개발 웹 서버는 아마도 그렇게 구성되어 있지만 프로덕션 하나 (Apache Nginx? 다른 것?)는 아닙니다. This question 도움이 될 수 있습니다.

이 이유는 React가 단일 페이지 응용 프로그램을 작성하는 데 사용되기 때문입니다. 하나의 전통적인 웹 페이지가 있습니다.이 스크립트는 일부 스크립트를로드합니다. 빌드 프로세스의 결과가 가장 좋을 것입니다. 그런 다음 그 스크립트가 모든 것을 처리합니다. 여기에는 새로운 DOM을 생성하고, "서버"에 데이터를 요청하며, 뷰가 변경 될 때 URL을 조작하여 다중 페이지 앱 동작을 위장하는 작업까지 포함됩니다. 이 마지막 비트는 반응 라우터가하는 것입니다.

그러나 웹 서버는 일반적으로 이러한 것을 알지 못합니다. URL을 제공하는 방법을 알고 있습니다. yourdomain.com/을 요청하면 해당 페이지가 게재되지만, yourdomain.com/some/page/123을 요청하면 특별히 구성하지 않는 한 어떤 서비스를 제공할지 알 수 없습니다. 한 가지 구성은 이러한 다른 URL에 대한 기본 페이지의 내용도 반환하는 것입니다. React-router는 URL을 집어 들고 적절한 구성 요소를 사용하므로 모든 것이 정상적으로 보입니다.>

+1

좀 더 구체적으로, 저자는'index.html'을 다루는 핸들러에서'/'를'/ *'로 바꿔야 할 것입니다. –