react-routerとwebpack dev serverを使用したネストされたURLルーティング

Question

ネストされた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 appliationに周りをクリックすると、私は/登録/ STEP2に私はリフレッシュを打つ一度取得することができます

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()} />); 

ブラウザでは、common.jsとbundle.jsが見つからない：404、/ register /ディレクトリからすべてをロードしようとしているので。

誰でも手助けできますか？ありがとう。

Answer 1

createBrowserHistory（）の代わりにhashHistoryを使用すると、サーバーがサーバー上の現在のURLを要求しないようになります。

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

Answer 2

私はそれを理解しました。これを可能にするために必要な2つのこと。

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 }, 
     ] }, 
    ] 
};