react-reason 및 webpack dev 서버를 사용한 중첩된 URL 라우팅

react-reason 및 webpack dev 서버를 사용한 중첩된 URL 라우팅

중첩된 URL 라우팅을 위해 react-router 및 webpack-dev-server와 함께 작업하는 데 문제가 있어.

webpack.config.js

output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: "/", <-- this enabled routing to /register/step2
    filename: "js/bundle.js",
},

routes.js.

const routes = {
    childRoutes: [
        { path: '/', component: Home },
        { path: '/login', component: Login },
        { path: '/register', component: Register },
        { path: '/register/step2', component: SecondStep },
    ]
};

export default (<Router routes={routes} history={createBrowserHistory()} />);

어플리케이션을 클릭하면 /register/step2로 이동할 수 있지만 브라우저에서 refresh를 누르면 common.js와 bundle.js가 누락됨: /register/directory에서 모든 것을 로드하려고 하기 때문이다.

누구 도와줄 사람 있어?고마워요.

알아냈어. 이걸 가능하게 하기 위해 필요한 두 가지가 있어.

webpack.config.js

devServer: {
    historyApiFallback: true <-- this needs to be set to true
}

routes.js.

const routes = {
    childRoutes: [
        { path: '/', component: Home },
        { path: '/login', component: Login },
        { path: '/register', component: Register, childRoutes: [
            { path: 'step2', component: SecondStep },
        ] },
    ]
};

웹 팩 구성 파일에 다음 코드가 포함되어 있는지 확인하십시오.

output: {
    publicPath: '/'
},
devServer: {
    historyApiFallback: true
}

이 문서에서 자세히 보기

만일 당신이 browserHistory()를 만드는 대신에 hashHistory를 사용하면, 그것은 당신의 서버에 있는 당신의 현재 URL에 서버가 요청하지 못하게 할 것이다.

export default (<Router routes={routes} history={hashHistory} />);

참조URL: https://stackoverflow.com/questions/35027260/nested-url-routing-using-react-router-and-webpack-dev-server