使用 react-router 和 webpack 开发服务器的嵌套 url 路由 [英] nested url routing using react-router and webpack dev server

问题描述

我在使用 react-router 和 webpack-dev-server 来实现嵌套 url 路由时遇到了一些问题.

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

在应用程序中单击时，我可以访问/register/step2，但是一旦我在浏览器中点击刷新，我的 common.js 和 bundle.js 就会丢失:404，因为它试图从/register/加载所有内容目录.

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.

推荐答案

我想通了.启用此功能所需的 2 件事.

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

webpack.config.js

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

这篇关于使用 react-router 和 webpack 开发服务器的嵌套 url 路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！