关于react-router和后端路由以及静态文件处理问题

关于项目

前端用的react-router,后台用的koa,后台只提供接口,

问题

将项目发布到线上koa如何处理静态文件?
前端用react-router路由,后端如何去匹配路由?

问题一
用koa-static 设置其路径 co-views 设置其返回的html

问题二
第一次一次刷新之后得到的响应是你的后端提供的,并且不再是 index.html 了,那么你既没有后端对应的路由也无法通过 index.html 加载前端路由,只有返回404 ;这里因为有前端路由,所以可以这样做,后端做全局路由匹配,无论是发过来的请求 URL 是什么,统统返回 index.html 让前端去匹配不同的 URL 如下面router路由;处理静态资源请求;routerAPI处理api请求,这里需要做一下路由匹配,先有中间件router处理,若匹配到api,交由routerAPI中间件处理;这样就完成了koa对前端react-router的处理

  目录结构
  --src
    |---dist
          |--index.html
    |---app
          |---server.js
  //server.js
  var koa = require('koa');
  var Router = require('koa-router')
  var statics = require('koa-static');
  var views = require('co-views');

  var app = koa();
  app.use(statics(__dirname + '/../dist'));
  var render = views(__dirname + '/../dist', {
        map: {
            html: 'swig'
        }
   });

  var router= new Router();
    router.get('/*', function * (next) {
        if (!this.path.match(/api/)) {
            this.body = yield render("index")
        }
        yield next
    })
  app.use(routerroutes()).use(router.allowedMethods())
  
  var routerAPI= new Router({prefix: '/api'});
  routerAPI.get('/users', function * (next) {
        //doing somethings
        return next
    })
   app
        .use(routerAPI.routes())
        .use(routerAPI.allowedMethods())



你可能感兴趣的:(关于react-router和后端路由以及静态文件处理问题)