使用 react-router 和 webpack 开发服务器的嵌套 url 路由

IT技术 reactjs webpack react-router webpack-dev-server
2021-04-01 07:25:02

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

webpack.config.js

output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: "/", <-- this enabled routing to /register/step2
    filename: "js/bundle.js",
},

路由.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/ 目录加载所有内容。

任何人都可以帮忙吗？谢谢。

2个回答

我想到了。启用此功能所需的 2 件事。

webpack.config.js

devServer: {
    historyApiFallback: true <-- this needs to be set to true
}


路由.js

const routes = {
    childRoutes: [
        { path: '/', component: Home },
        { path: '/login', component: Login },
        { path: '/register', component: Register, childRoutes: [
            { path: 'step2', component: SecondStep },
        ] },
    ]
};
historyApiFallback: true，似乎解决了问题..谢谢
2021-06-02 07:25:02
2021-06-22 07:25:02

如果您使用 hashHistory 而不是 createBrowserHistory() 它将阻止服务器请求您服务器上的当前 url。

export default (<Router routes={routes} history={hashHistory} />);
react-router 上的指南建议使用 browserHistory 而不是 hashHistory。 github.com/reactjs/react-router/blob/1.0.x/docs/guides/basics/...
2021-05-30 07:25:02
有没有办法在不使用哈希的情况下实现这一目标？
2021-06-05 07:25:02
其它你可能感兴趣的问题
上一篇选择在react材料 ui 中单击图标组件（下拉箭头）不起作用 下一篇react - 无法读取未定义的属性“调用”