项目采用 koa2 作为中间层进行接口转发,前端采用 react 开发,最后将打包后的文件放到 koa2 的目录下作为静态资源访问,目前刷新浏览器会出现 404 情况,怎样操作才能让 react 管理自己的路由(非 SSR )
当后端匹配到前端路由的时候给它重定向到首页,一般这个是由nginx来做~
react vue单页面应用,虽然url显示路由一直在切换,其实只是H5 history 的路由切换 。对面后端他本身根本没有跳转,还在当前页面,所以后端不管他怎么切换路由都重定向到首页就OK了。
get(/*, ctx => { ctx.render(‘index’) })
楼上已经说了…
www.example.com/#/auth/login 这个路由本质上是请求 /index.html 文件,然后由 React Router 再根据 # 后面的内容进行路由匹配
www.example.com/#/auth/login
/index.html
#
如果去掉 # 号, www.example.com/auth/login 实际上请求的是 /auth/login. 但服务器上没有这个文件,只能返回 404
www.example.com/auth/login
/auth/login
所以要想去掉 #,就要做重定向
/#/auth/login >>> /auth/login
或者简单粗暴点的,把所有 404 的请求,都返回 index.html. 相当于把路由控制权,交还给了前端静态路由
index.html
已解决,感谢大家
CNode 社区为国内最专业的 Node.js 开源技术社区,致力于 Node.js 的技术研究。
当后端匹配到前端路由的时候给它重定向到首页,一般这个是由nginx来做~
react vue单页面应用,虽然url显示路由一直在切换,其实只是H5 history 的路由切换 。对面后端他本身根本没有跳转,还在当前页面,所以后端不管他怎么切换路由都重定向到首页就OK了。
get(/*, ctx => { ctx.render(‘index’) })
楼上已经说了…
www.example.com/#/auth/login这个路由本质上是请求/index.html文件,然后由 React Router 再根据#后面的内容进行路由匹配如果去掉
#号,www.example.com/auth/login实际上请求的是/auth/login. 但服务器上没有这个文件,只能返回 404所以要想去掉
#,就要做重定向或者简单粗暴点的,把所有 404 的请求,都返回
index.html. 相当于把路由控制权,交还给了前端静态路由已解决,感谢大家