react-router打包后打开路由页面空白
2017-12-12 14:47
3895 查看
react-router打包后无法通过路由进入到页面,是因为当我们使用react-router-dom里的BrowserRouter as Router时,是用浏览器history对象的方法去请求服务器,
如果服务器没有相对于的路由去指向对应的页面路由会找不到资源。
BrowserRouter会变成类似这样的路径 http://111.230.139.105:3001/detail/9459469,这样的路径在访问服务器时,服务器会认为是请求查找某个接口数据
所以这时候必须使用HashRouter,这时候访问具体页面时就是http://111.230.139.105:3001/#/detail/9459469
webpack打包时要添加NODE_ENV,并且将devtool:'eval-source-map',去除,不然build出来的js特别大,source map是为了代码出错后采用source-map的形式直接显示你出错代码的位置
打包生产包时去除,加上这两个后大部分简单单页面应用会在100k到200k
如果服务器没有相对于的路由去指向对应的页面路由会找不到资源。
BrowserRouter会变成类似这样的路径 http://111.230.139.105:3001/detail/9459469,这样的路径在访问服务器时,服务器会认为是请求查找某个接口数据
This request URL /detail/9459469 was not found on this server.
所以这时候必须使用HashRouter,这时候访问具体页面时就是http://111.230.139.105:3001/#/detail/9459469
import { HashRouter as Router, Route } from 'react-router-dom' import createHistory from 'history/createHashHistory' const history = createHistory() <Router history={history}> <Route render={({ location }) => { return( <div> <Route location={location} exact path="/" component={Home} /> <Route location={location} path="/detail/:id" component={Detail} /> <Route location={location} path="/comment/:id" component={Comment} /> </div> )}}/> </Router>
webpack打包时要添加NODE_ENV,并且将devtool:'eval-source-map',去除,不然build出来的js特别大,source map是为了代码出错后采用source-map的形式直接显示你出错代码的位置
打包生产包时去除,加上这两个后大部分简单单页面应用会在100k到200k
new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }),
// devtool:'eval-source-map',
相关文章推荐
- React-Router做路由,打包出来的静态文件丢到Tomcat里路由不生效,刷新页面404两个错误
- vue +vue-cli+vue router ,npm run build 打包完页面空白,不显示URL的#号router模式为history
- React学习(三)——Router路由的使用和页面跳转
- react-router 路由控制页面跳转
- react-router(v3)切换页面时不刷新页面,实现显示和隐藏子路由组件
- Vue下路由History模式打包后页面空白的解决方法
- React学习笔记——Router(有待完善类比学习、页面路由与服务端路由部分)
- 使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
- vue项目打包后打开页面空白解决办法
- react入门之路由----react-router的跳转问题
- dedecms文章跳转属性,打开后页面空白
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- 前端路由实现与 react-router 源码分析
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
- 前端路由实现与 react-router 源码分析
- React-router路由实践
- Vue中在新窗口打开页面及Vue-router的使用
- 打开QQ邮箱等页面显示一片空白的解决方法
- vue打包后有的手机安装后页面显示空白,请教原因