有了前端路由后还需要设置后端路由吗

前端项目中用了react-router作为前端路由,Koa2作为实现请求跨域转发的中间层。我们知道前端路由的好处就是用户体验好,可以无缝跳转链接,而不需要向后端路由那样还要重新发送请求。那么有了前端路由后,还需要设置后端路由吗?

OK,工程逐步上线。
前端路由那边重新访问到一个页面,eg:/test/123. 那你重新刷新这个页面的话,就会报404错误。这是为什么呢?
前端路由是在页面内的 js 代码加载并执行完成之后才能正常工作的,当它开始工作的时候,URL 的变化就不再是传统意义上的刷新,而是跟踪 history 的变化。
那么什么时候加载成功了呢?一般来说就是通过 index.html 来加载的(这就是 spa 的最基本形态)
你手动刷新了非根路径的 URL 之后为什么 404 呢?很显然,这一次刷新之后得到的响应是你的后端提供的,并且不再是 index.html 了,那么你既没有后端对应的路由也无法通过 index.html 加载前端路由,不 404 还能是什么呢?
有一个简单的解决方法是后端做全局路由匹配,无论是发过来的请求 URL 是什么,统统返回 index.html 让前端去匹配不同的 URL。
这里我使用koa-router做全局路由。
koa-router把前端的对应连接的路由做全局路由,render到同一个index.html文件。
(这个index.html都是加载同一个webpack打包后的bundle.js文件)
举个栗子:
前端的react-router路由,核心代码如下:

<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="mine" component={Mine} />
<Route path="add" component={Edit} />
<Route path="new" component={New} />
<Route path="help" component={Help} />
<Route path="dev" component={Dev} />
<Route path="survey/:id" component={Survey} />
<Route path="edit/:id" component={Edit} />
<Route path="setting/:id" component={Setting} />
<Route path="result/:id" component={Result} />
<Route path="notfound" component={NotFound} />
<Route path="dashboard" component={DashBoard} />
</Route>

后端根据前端的路由设置render的文件,核心代码如下:

const config = {
path: [
'/',
'/mine',
'/add',
'/help',
'/dev',
'/notfound',
'/survey/:id',
'/edit/:id',
'/setting/:id',
'/result/:id',
'/dashboard'
],
view: 'index.jsx', // 这里index.js使用了react的服务端渲染方法
controller: function() {
this.render({ userInfo: this.userInfo })
}
}

同时导入这个文件设置koa-router的路由,核心代码如下:

router[get](config.path, async function(ctx, next) {
ctx.render = render(ctx, Page)
let result = await controller.call(ctx, next)
if(typeof result != 'undefined') {
ctx.type = "application/json";
ctx.body = result;
}
})

这样浏览器的地址栏输入前端的连接,第一步肯定就是走koa-router这边的路由,一旦页面加载进来之后,
页面的链接跳转再交由react-router处理。