URL을 캡슐화하여 다시로드하거나 새로 고칠 때 반응하는 js 응용 프로그램 페이지의 404 오류를 수정합니다.

Question

react js를 사용하여 사이트를 만들었습니다. browserHistory을 사용하는 로컬 시스템에서는 정상적으로 작동하지만 프로덕션 서버에서는 작동하지 않습니다. 처음 제대로로드됩니다. 페이지를 새로 고침하면 "페이지를 찾을 수 없음"오류가 발생합니다.

나는 hashHistory을 사용해 보았습니다. 그것은 내 문제를 해결했지만 복잡한 URL을 싶지 않아 더 나은 솔루션을 찾고 있는데 hashHistory # 및 임의의 키가 포함되어 있습니다. 아파치의 솔루션을 찾고

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel' 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './', 
    port: 3000 
    } 
}; 

-

내 webpack.config.js 코드 (우리는 http://example.com/about처럼 뭔가 캡슐화하고 http://example.com/#/about?_k=9yfmfq을 좋아하지 싶어). 멍청한 질문에 대해 유감스럽게 생각합니다.

Answer 1

문제점 처음으로 yourdomain.com을로드 할 때 서버가 index.html 파일을 기본적으로 제공합니다. 따라서 yourdomain.com/something을 시도하면 서버는 해당 파일을 찾지 만 404는 보내지 않습니다. 모든 페이지 요청을 index.html 파일로 리디렉션하도록 서버를 구성해야합니다. 모든 루트는 자바 스크립트에 의해 처리됩니다 다음 자바 스크립트를로드합니다 index.html을 모든 URL을 리디렉션합니다

location/{ 
    try_files $uri /index.html; 
} 

이 -

여기 single page application에 대한 간단한 nginx 구성입니다.