Koa с маршрутизатором на стороне клиента

Текущая ситуация:

интерфейс: React и React-Router

бэкэнд: Коа

app.use(mount('/graphql', graphqlHTTP({ schema: schema })));
app.use(mount('/api', api));
app.use(serve(__dirname + '../../public')); //serves static index.html

Когда я нажимаю ‹Link> React Router в браузере, отображаются все веб-страницы. Каждый раз, когда я обновляю страницу или вручную ввожу ссылку. Я получаю страницу «не найдено». Кстати, здесь нет рендеринга на стороне сервера. Как позволить React-Router обрабатывать маршруты, не указанные выше, то есть только на клиенте?


reactjs javascript react-router koa
person Seneca    schedule 11.10.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Сервер должен ответить чем-то при обновлении страницы; в этом случае он должен ответить index.html, чтобы клиентское приложение могло загрузиться, а затем React Router может смонтировать правильный компонент на основе URL-адреса.

Итак, на стороне сервера вам нужно указать Koa обслуживать index.html для каждого URL-адреса, который еще не соответствует ни одному из других маршрутов.

person Michelle Tilley    schedule 11.10.2015
comment
вот пример того, что сказал @BinaryMuse stackoverflow.com/questions/33062215/ - person knowbody; 12.10.2015
comment
Это хороший пример для сервера Express; Я бы опубликовал один для Коа, но я не очень хорошо с ним знаком. :) - person Michelle Tilley; 12.10.2015
comment
Спасибо, работаю; Я перевел экспресс-пример на koa. - person Seneca; 12.10.2015

arrow_upward
1
arrow_downward

Решение (на основе ответа выше)

import router from 'koa-router';
import sendfile from 'koa-sendfile';
//code to initialize router
//...

router.get('*', function* () {
    let stats = yield* sendfile.call(this, pathToIndexHtml));

     if (!this.status) this.throw(404)
})

Koa теперь обслуживает index.html по всем не указанным маршрутам. :)

person Seneca    schedule 12.10.2015
comment
Что является корнем sendfile? Относительно того, где находится server.js? - person Elegant.Scripting; 03.03.2016