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

When clicking around in the appliation, I can get to /register/step2 but once I hit refresh in the browser, my common.js and bundle.js is missing: 404, since it's trying to load everything from /register/ directory.

Can anyone help? Thanks.

Bruce Lim · Accepted Answer · 2016-02-12 21:52:13Z

8

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

answered Feb 12, 2016 at 21:52

Bruce Lim

7557 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pravin Over a year ago

historyApiFallback: true, seems to solve the problem.. thanks

Marc Over a year ago

but not with hot reload: stackoverflow.com/questions/40159965/…

RamoFX · Accepted Answer · 2021-12-28 12:39:57Z

0

Make sure your webpack configuration file contains following code:

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

See more in this article

answered Dec 28, 2021 at 12:39

RamoFX

5462 gold badges9 silver badges18 bronze badges

Comments

RichG · Accepted Answer · 2016-01-27 01:34:34Z

-1

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

answered Jan 27, 2016 at 1:34

RichG

3092 silver badges5 bronze badges

2 Comments

Bruce Lim Over a year ago

Is there not a way to achieve this without using hashes?

Bruce Lim Over a year ago

The guide at react-router recommends using browserHistory over hashHistory. github.com/reactjs/react-router/blob/1.0.x/docs/guides/basics/…

Collectives™ on Stack Overflow

nested url routing using react-router and webpack dev server

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related