react-router-dom项目中使用BrowserRouter出现Cannot GET /xxx 404问题

问题:

在React项目中配置了react-router-dom路由之后,在组件中使用 后,直接在地址栏访问指定路由时出现了404的问题,如下图:

解决方法:

因为项目是使用webpack构建的,所以在配置 webpack-dev-server 本地服务时,少了一些配置,只需要在 webpack.config.js 配置文件中添加 devServer 的配置项就可以了:

module.exports = {
    devServer: {
	contentBase: './dist',
	host: 'localhost',
	port: 4000,
	inline:true,  //缺少该配置,会出现上面的错误
	historyApiFallback:true  //缺少该配置,会出现上面的错误
    }
}

完成以上配置后,重启服务,在浏览器地址栏中直接访问路由,就不会有问题了。

原文地址:https://www.cnblogs.com/jpwz/p/12457586.html