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

Posted 2023-02-21

【中文标题】使用 react-router 和 webpack 开发服务器的嵌套 url 路由

【英文标题】：nested url routing using react-router and webpack dev server

【发布时间】：2016-05-03 19:23:54

【问题描述】：

我在使用 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",
,

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

有人可以帮忙吗？谢谢。

【参考方案1】：

我想通了。启用此功能需要两件事。

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

【讨论】：

historyApiFallback: true, 似乎解决了问题.. 谢谢

但不支持热重载：***.com/questions/40159965/…

【参考方案2】：

确保你的 webpack 配置文件包含以下代码：

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

查看更多in this article

【参考方案3】：

如果您使用 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/…