nested url routing using react-router and webpack dev server

Question

I\'m having some issues working with react-router and webpack-dev-server to achieve nested url routing.

webpack.config.js

output: {
         


        

Answer 1

I figured it out. 2 things that is needed to enable this.

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

Answer 2

If you use hashHistory instead of createBrowserHistory() it will keep the server from requesting to your current url on your server.

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