verschachtelte URL-Routing mit react-Router und Webpack-dev-Server

Question

Ich habe einige Probleme bei der Arbeit mit React-Router und Webpack-Dev-Server, um geschachtelte URL-Routing zu erreichen.

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

Wenn um im appliation klicken, kann ich/Registrieren/step2 bekommen, aber sobald ich getroffen refresh Im Browser fehlen meine common.js und bundle.js: 404, da versucht wird, alles aus/register/directory zu laden.

Kann jemand helfen? Vielen Dank.

Answer 1

Wenn Sie hashHistory anstelle von createBrowserHistory() verwenden, verhindert dies, dass der Server Ihre aktuelle URL auf Ihrem Server anfordert.

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

Answer 2

Ich fand es heraus. 2 Dinge, die benötigt werden, um dies zu ermöglichen.

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