React Router를 사용할 때 페이지를 새로 고치거나 URL을 직접 입력 할 때 "내부 서버 오류"가 발생했습니다.

Question

많은 질문을 본 적이 있지만 나에게 적합한 해결책을 찾을 수 없습니다.

이 문제는 Heroku를 밀고 웹에서로드 할 때만 발생합니다. 내 사이트 (예 : domain.com)의 루트로 이동하면 페이지가로드됩니다. 주위를 클릭하면 URL을 변경하는 동안 페이지가 올바른 구성 요소로 다시 보입니다. 페이지를 새로 고치거나 URL을 입력하거나 어떤 방법 으로든 페이지를 탐색하면 홈 페이지에서 시작된 링크 집합에 "내부 서버 오류"가 표시됩니다.

이 문제는 실제 라우터 문제입니다. devServer config historyApiFallback을 true로 변경하려고했습니다. 또한 historyApiFallback의 색인을 내 응용 프로그램의 루트로 변경하려고 시도했습니다. 내가 Heroku가 내 로그에 갈 때 package.json에게

2017-11-13T05:43:36.957344+00:00 app[web.1]: ReferenceError: path is not defined 
2017-11-13T05:43:36.957347+00:00 app[web.1]:  at /app/server.js:7:23 
2017-11-13T05:43:36.957348+00:00 app[web.1]:  at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5) 
2017-11-13T05:43:36.957349+00:00 app[web.1]:  at next (/app/node_modules/express/lib/router/route.js:137:13) 
2017-11-13T05:43:36.957350+00:00 app[web.1]:  at Route.dispatch (/app/node_modules/express/lib/router/route.js:112:3) 
2017-11-13T05:43:36.957351+00:00 app[web.1]:  at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5) 
2017-11-13T05:43:36.957352+00:00 app[web.1]:  at /app/node_modules/express/lib/router/index.js:281:22 
2017-11-13T05:43:36.957353+00:00 app[web.1]:  at param (/app/node_modules/express/lib/router/index.js:354:14) 
2017-11-13T05:43:36.957354+00:00 app[web.1]:  at param (/app/node_modules/express/lib/router/index.js:365:14) 
2017-11-13T05:43:36.957355+00:00 app[web.1]:  at Function.process_params (/app/node_modules/express/lib/router/index.js:410:3) 
2017-11-13T05:43:36.957355+00:00 app[web.1]:  at next (/app/node_modules/express/lib/router/index.js:275:10) 

{ 
    "name": "app", 
    "version": "1.0.0", 
    "description": "App", 
    "main": "index.js", 
    "repository": "xxx@github.com", 
    "scripts": { 
    "start": "webpack-dev-server --inline --content-base . --history-api-fallback", 
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test", 
    "test:watch": "npm run test -- --watch", 
    "prod": "NODE_ENV=production node server.js", 
    "postinstall": "webpack -p" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.2.1", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.1.18", 
    "babel-preset-react": "^6.1.18", 
    "chai": "^3.5.0", 
    "chai-jquery": "^2.0.0", 
    "jquery": "^2.2.1", 
    "jsdom": "^8.1.0", 
    "mocha": "^2.4.5", 
    "react-addons-test-utils": "^0.14.7", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.0" 
    }, 
    "dependencies": { 
    "axios": "^0.16.2", 
    "babel-preset-stage-1": "^6.1.18", 
    "lodash": "^3.10.1", 
    "react": "^0.14.3", 
    "react-autosuggest": "^9.3.2", 
    "react-dom": "^0.14.3", 
    "react-dropzone": "^4.2.1", 
    "react-pdf": "^2.1.1", 
    "react-redux": "4.3.0", 
    "react-router": "^2.0.1", 
    "react-router-dom": "^4.1.2", 
    "react-select": "^1.0.0-rc.10", 
    "recharts": "^1.0.0-beta.0", 
    "redux": "^3.0.4", 
    "redux-promise": "^0.5.3", 
    "redux-thunk": "^2.2.0" 
    } 
} 

서버를 domain.com/activity로 이동하려고 할 때

업데이트 , 나는이 오류가 발생합니다. js

var express = require('express'); 
var app = express(); 

app.use(express.static(__dirname + '/')); 
app.get('*', function (request, response){ 
    response.sendFile(path.resolve(__dirname, 'index.html')) 
}); 
app.listen(process.env.PORT || 8080); 

webpack.conf ig.js

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

Answer 1

문제가 해결 된 것 같습니다. server.js에 나는

var path = require('path'); 

을 추가했으며 올바르게 라우팅되기 시작했습니다.