routing z zagnieżdżonymi adresami URL za pomocą routera reagującego routera i serwera dystrybucji WWW

Question

Mam problemy z działaniem routera reagowania i serwera sieci webpack-dev w celu uzyskania zagnieżdżonego routingu adresów URL.

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

Po kliknięciu wokół w appliation, mogę dostać się do/Rejestracja/krok2 ale raz uderzę odświeżanie w przeglądarce brakuje mojego pliku common.js i bundle.js: 404, ponieważ próbuje on załadować wszystko z katalogu/register /.

Czy ktoś może pomóc? Dzięki.

Answer 1

Jeśli użyjesz hashHistory zamiast createBrowserHistory(), serwer nie będzie żądał od twojego aktualnego adresu URL na twoim serwerze.

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

Answer 2

Wymyśliłem to. 2 rzeczy, które są potrzebne, aby to umożliwić.

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