Wie Browserhistorie in Reagieren Router mit Koa verwenden

Question

Im Express können wir einfach folgende Codes verwenden, um mit der Anfrage umzugehen. Die Serverseite sendet index.html, wenn die Anfrage nicht vom Router bearbeitet wird.

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

Aber in koa funktioniert der folgende Code nicht. Wenn die Anfrage nicht von koa-router bearbeitet wird, wird 404 anstelle von index.html zurückgegeben.

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()) 

folgenden Code auch nicht funktionieren

router 
    .get('*', function*() { 
    yield send(this, __dirname +'/../public/index.html') 
    }) 

Answer 1

Im Wesentlichen, was Sie erreichen möchten, ist Server-Rendering. Sie müssen die Routenkonfiguration mit der Übereinstimmung & RouterContext schreiben. react-router hat detaillierte Dokumentation dafür.

Server Rendering in react-router

Bei koa kann es grob auf diese Weise durchgeführt werden.

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) 

Ich fand ein paar Repos online, die ziemlich anständig scheinen. Ich habe sie jedoch nicht überprüft.

breko-hub

koa-react-isomoprhic

Answer 2

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

das für mich arbeitet