중첩 된 경로 및 browserHistory

browserHistory 및 중첩 된 경로로 작업하는 데 문제가 있습니다. 주요 문제는 직접 경로를 입력하거나 브라우저를 새로 고치는 것입니다. 중첩되지 않은 경로는 완벽하게 작동하지만 중첩 된 경로는 완벽하게 작동하지 않습니다.중첩 된 경로 및 browserHistory

나는 로컬 웹팩-DEV-서버를 사용하고 있는데 나는 역사-API-대체 플래그 사용하고 있습니다 : 역사-API-대체 플래그가 없으면

을 : 어떤 경로를 내가 직접 입력하거나 새로 고침 브라우저 창에서 "Can not GET/... ..."이라고 표시됩니다. 이는 예상되는 동작입니다.
history-api-fallback 플래그가 있습니다. 중첩되지 않은 경로는 올바르게 입력되거나 새로 고쳐지지만 중첩 된 경로는 올바르게 작동하지 않습니다. 나는 브라우저 창에서 렌더링 된 동일한 반응 라우터 (?) 오류를 얻지 않지만 콘솔에서 404를 얻습니다. 브라우저가 webpack 번들을 경로의 한 레벨에서로드하려고하는 것처럼 보입니다 (예 : if 나는/학교/편집 중이 야 새로 고침, 브라우저는 webpack bundle.js를/학교/및 404에서로드하려고 시도 함).

중첩 된 경로가 몇 개있는 매우 간단한 설정입니다. 모든 구성 요소는 이제 텍스트로 div를 렌더링합니다 (app.props.children을 출력하는 App 및 School을 제외하고 자식 경로를 렌더링 함).

내 경로 :

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
    <IndexRoute component={Home} /> 

    <Route path="schools" component={Schools}> 
     <IndexRoute component={SchoolManager} /> 
     <Route path="manage" component={SchoolManager} /> 
     <Route path="edit" component={SchoolEditor} /> 
    </Route> 

    <Route path="*" component={Home} /> 
    </Route> 
</Router>

웹팩 설정 : 웹팩 dev에 서버 (A 방랑 VM 내부에서 실행)를 시작하는

entry: [ 
    'webpack/hot/only-dev-server', 
    './app/scripts/main.js', 
    './app/styles/main.scss' 
], 
devtool: 'source-map', 
output: { 
    path: './build/', 
    filename: 'bundle.js' 
}, 
module: { 
    loaders: [ 
    { 
     test: /\.(js|jsx)$/, 
     loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=stage-0,presets[]=react'], 
     exclude: /node_modules/ 
    }, 
    { 
     test: /\.(html|png)$/, 
     loader: 'file?name=[path][name].[ext]&context=./app' 
    }, 
    { 
     test: /\.scss$/, 
     loaders: ["style", "css", "sass"] 
    } 
    ] 
}, 
plugins: [ 
    new webpack.NoErrorsPlugin() 
], 
watchOptions: { 
    poll: true 
}

NPM 스크립트 :

webpack-dev-server --host 0.0.0.0 --progress --colors --inline --hot --history-api-fallback

요약하면 :

<Link> 위의 경로 중 하나를 사용하면/학교/학교/관리,/학교/수정 등이 작동합니다.
/입력하거나 새로 학교에서 잘 작동합니다.
다른 중첩 경로 (/ 학교/관리,/학교/수정)를 입력하거나 새로 고침을해도 작동하지 않습니다.

'학교'는 기술적으로 중첩 된 경로이지만 제대로 작동하는 것처럼 보였으므로 다른 상황이 발생할 가능성이 있습니다. 모든 통찰력에 미리 감사드립니다.

출처

2016-06-30 Will Ashe

할 수 있습니다 제공 웹팩/devserver 설정 –

@Utro 추가 웹팩 설정 및 NPM 스크립트, 감사 –

는 <= 링크 "/ 관리/학교"/>를 작동 이상한, 그러나 인 - 나던 일을 입력하면 테스트 목적으로 리포를 제공 할 수 있습니까? –

나 자신을 가장 오래 사직 한 후 마침내 중첩 된 경로에 대한 해결책을 찾게되었습니다. 번들 스크립트 src를 bundle.js에서 /bundle.js으로 변경해야했습니다. 선두 인 /은 브라우저가 루트 디렉토리에서 bundle.js를로드하도록합니다. Fastas에 제공 : Unexpected token < error in react router component

출처

2017-04-20 16:28:10

중첩 된 경로 및 browserHistory

답변

관련 문제