内容简介:先上react App代码点击后可以正常跳转至lottery路由,忽略丑陋的界面...
问题
先上react App代码
class App extends React.Component { render() { return ( <BrowserRouter> <div> <Link to="/lottery">to lottery</Link> <Route path="/lottery" component={Lottery} exact /> <Route path="/a" render={() => <div>in a</div>} exact /> </div> </BrowserRouter> ) } }
点击后可以正常跳转至lottery路由,忽略丑陋的界面...
这时刷新就404找不到页面了
原因
react的BrowserRouter用的是Html5提供的HistoryApi方法,Link组件实际上是调用了History.pushState(),然后通过监听history状态去展示或者隐藏组件。所以当刷新时,也就是向服务器发送了这个路径的请求,而服务器上实际是没有对这个路径的请求做任何处理的,故返回的是404。
解决方法 -- 用的是koa搭建服务器
app.use(views(path.resolve(__dirname, '../www/dist'), {extension: 'html'})) app.use(async (ctx, next) => { console.log(ctx.path) await next() }) app.use(router.routes()) router.all(/\.js/i, static(path.resolve(__dirname, '../www/dist'))) router.all('*', async ctx => { await ctx.render('index') })
只要不是以.js结束的路由请求都返回index.html,js类型的就从项目打包出来的静态资源里找,相当于把路由的控制权交给了前端。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 从零开始上线网站的日常(二)— 第一次上线
- Windows Server 2019下半年上线:首个预览版Build 17623上线
- vue路由篇(动态路由、路由嵌套)
- 小程序封装路由文件和路由方法,5种路由方法全解析
- Alice 上线小记
- 谈项目上线(9.21)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
UML基础与Rose建模案例
吴建 / 人民邮电出版社 / 2004-10 / 29.00元
《UML 基础与Rose建模案例》介绍了用UML(统一建模语言)进行软件建模的基础知识以及Rational Rose工具的使用方法,其中,前8章是基础部分,对软件工程思想、UML的相关概念、Rational Rose工具以及RUP软件过程等进行了详细的介绍;后3章是案例部分,通过3个综合实例,对UML建模(以Rose为实现工具)的全过程进行了剖析;最后的附录中给出了UML中常用的术语、标准元素和元......一起来看看 《UML基础与Rose建模案例》 这本书的介绍吧!