Express : 서브 루틴에서 정적 파일 제공

Question

Express 및 create-react-app을 사용하여 라우팅 작업을 수행하려고합니다.

목표는 사용자가 URL이 / 일 때 응용 프로그램의 홈페이지로, URL이 /login 일 때 로그인 페이지로 이동하는 것입니다.

var express = require("express"); 
var path = require("path"); 

let router = express.Router(); 

router.route("/").get((req, res, next) => { 
    res.sendFile("index.html", { root: "./client/build/" }); 
}); 

router.route("/login").get((req, res, next) => { 
    res.send("This is the login page"); 
}); 

module.exports = router; 

: mainRoutes은 기본 탐색 (적어도이는 아이디어)에 대한 책임, apiRoutes 모든 API를 라우팅 정의를 포함

var mainRoutes = require("./routes/mainRoutes"); 
var apiRoutes = require("./routes/apiRoutes"); 

[...] 

app.use("/", mainRoutes); 
app.use("/api", apiRoutes); 

동안 내 server.js에서

나는 두 개의 경로가 정의되어

어디에서나 create-react-app 구축 프로세스에서 생성 된 정적 저작물에 대한 내용을 읽었으므로 다음을 추가했습니다.

// Priority serve any static files. 
app.use(express.static(path.join(__dirname, "client/build"))); 

// All remaining requests return the React app, so it can handle routing. 
app.get("*", function(req, res) { 
    res.sendFile(path.join(__dirname + "/client/build/index.html")); 
}); 

이 줄을 추가하면 매번 index.html을 볼 수 있지만 매회마다 기본 페이지 (index.html)로 리디렉션되기 때문에 /login 및 /api 하위 루트를 방문 할 수 없습니다.

내 서브 루트 mainRoutes에 정적 파일을 제공해야하지만 그렇게하는 방법에 대한 아이디어가 없습니다.

어떻게하면됩니까?

Answer 1

create-react-app 서버와 js를 사용하여 범용 라우팅을 수행하지 않는 한 하나의 페이지 응용 프로그램을 실행하기 때문에 원하는 라우팅 경로를 브라우저에서 처리 할 수 ​​없다고 생각합니다.

Answer 2

app.get('*')은 당신이하는 모든 단일 경로를 일치합니다 번들

당신은이 같은

해야 :.

var mainRoutes = require("./routes/mainRoutes"); 
var apiRoutes = require("./routes/apiRoutes"); 

[...] 

app.use(express.static(path.join(__dirname, "client/build"))); 

app.use("/", mainRoutes); 
app.use("/api", apiRoutes); 

// If the app reaches this point, it means that 
// the path did not match any of the ones above 
app.use(function(req, res, next){ 
    // redirect the user to where we serve the index.html 
    res.redirect('/'); 
});