自己配置webpack开发react+react-router项目时,路由匹配出现问题,定位到是webpack配置的问题。
就以react-router中的官方示例作为例子
这个例子中路由默认是Home,当点击About时,进入/about的路由:
但是当自己光标在地址栏按下enter键或者刷新页面的时候,或者手动输入地址栏的/about后,就出现了请求不到资源的提示:
出现这种问题是因为我们去拿资源的时候服务器并没有配置相应的找不到路径就返回原本页面,即加载其自己的组件。
解决:配置devServer中的historyApiFallback为true
devServer: {
contentBase: './dist',
port: 3000,
hot: true,
historyApiFallback: true
},