繁体   English   中英

如何在koa的反应路由器中使用浏览器历史记录

[英]How to use Browser history in react router with koa

在快递中,我们可以使用以下代码来处理请求。 当路由器未处理的请求时,服务器端将发送index.html。

app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, '../public', 'index.html'))
})

但在koa中,以下代码不起作用。 当请求未由koa-router处理时,它将返回404而不是index.html。

var send = require('koa-send')
var serve = require('koa-static')
var router = require('koa-router')
var koa = require('koa')
var app = koa();

app.use(serve(__dirname+'/../public'));
app.use(function *(){
   yield send(this, path.join(__dirname, '/../public/','index.html' )); })
app.use(router.routes())

以下代码也不起作用

router
  .get('*', function* () {
    yield send(this, __dirname +'/../public/index.html')
  })
router.get('*', async function(ctx, next) {
  var html = fs.readFileSync(path.resolve('./build/index.html'));
  ctx.type = 'html';
  ctx.body = html;
})

这对我有用

基本上你要实现的是服务器渲染。 您需要使用match&RouterContext编写路由配置。 react-router有详细的文档。

反应路由器中的服务器渲染

在koa的情况下,它可以大致以这种方式完成。

import router from 'koa-router'
import { match, RouterContext } from 'react-router'

const koaRouter = router()

const otherRouter = () => {
   return new Promise((resolve, reject) => {
    match({ routes, location }, (error, redirectLocation, renderProps) => { 
   ...
   ..
   .
 }
}

koaRouter
    .use(otherRouter)

我在网上发现了一些看起来很不错的回购。 我没有验证他们。

breko毂

KOA-反应-isomoprhic

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM