Как использовать историю браузера в маршрутизаторе-ответчике с koa

Question

В курьере мы можем просто использовать следующие коды для обработки запроса. Сторона сервера отправит index.html, когда запрос, который не обрабатывается маршрутизатором.

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

Но в koa следующий код не работает. Когда запрос не обрабатывается koa-маршрутизатором, он возвращает 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') 
    }) 

Answer 1

По сути то, что вы пытаетесь достичь, это сервер-рендеринга. Вам необходимо написать конфигурацию маршрута с совпадением & RouterContext. react-router имеет подробную документацию для этого.

Server Rendering in react-router

В случае коа, это примерно может быть сделано таким образом.

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-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; 
}) 

это работает для меня