自己配置webpack开发react+react-router项目时,路由匹配出现问题,定位到是webpack配置的问题。
就以react-router中的官方示例作为例子

这个例子中路由默认是Home,当点击About时,进入/about的路由:

但是当自己光标在地址栏按下enter键或者刷新页面的时候,或者手动输入地址栏的/about后,就出现了请求不到资源的提示:

出现这种问题是因为我们去拿资源的时候服务器并没有配置相应的找不到路径就返回原本页面,即加载其自己的组件。
解决:配置devServer中的historyApiFallback为true
devServer: {
contentBase: './dist',
port: 3000,
hot: true,
historyApiFallback: true
},
本文探讨了在使用React和React-Router时遇到的路由匹配问题,特别是在刷新页面或直接输入URL时。通过调整webpack配置,特别是启用devServer的historyApiFallback选项,可以确保即使在服务器上找不到请求的资源时,也能正确地回退到应用的入口文件。
3286

被折叠的 条评论
为什么被折叠?



