Изоморфные маршруты Javascript с React-Route и маршруты REST API

Я изучал response / flux / response-router и как происходит предварительный рендеринг виртуальной DOM на сервере. Вызов Router.run() и renderToString на сервере позаботится о предварительном рендеринге страницы на сервере и ленивой загрузке и загрузке остальных файлов .js на клиент. React-router работает с URL-адресами пользовательского интерфейса в любом сценарии (клиентском или серверном). Это не обязательно то же самое, что URL-адреса REST API сервера.

Как лучше всего добавить функциональность маршрутов? Если я хочу использовать бэкэнд для собственного приложения с функциями REST. должен ли я иметь полный набор определений маршрутов для express.js и также переопределить все маршруты в response-routes?

Маршруты React не обязательно похожи на экспресс-маршруты (могут иметь более или менее шаблоны маршрутов). Так что повторение определений маршрута кажется неизбежным. Это верно? даже этот пример, похоже, делает то же самое .

Я надеялся найти способ повторно использовать определение маршрутов или что-то более СУХОЕ.


reactjs isomorphic-javascript
person Morteza Shahriari Nia    schedule 16.05.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы не хотите дублировать маршруты на клиенте и сервере. См. Примеры потоков от Yahoo: https://github.com/yahoo/flux-examples/tree/master/react-router

Затем просто укажите запрос API перед реагирующим маршрутизатором на сервере. Например.:

var express = require('express');
var server = express();

// Static files
server.use('/assets', express.static('src/assets'));
server.use('/build', express.static('build'));

// Declare API handling:
require('apiRouting')(server);

// Decalre react-router handling
require('./routing.jsx')(server);

// In the apiRouting.js:
module.exports = function (server) {
    server.get('/api/methodA', function (req, res) {
        // body...
    });
    server.get('/api/methodB', function (req, res) {
        // body...
    });
};
person Tomas Kirda    schedule 18.05.2015
comment
Взгляните на пример задачи Yahoo. Кажется, они имеют в качестве макета переднего плана массив задач, и они симулируют вызовы API через случайные задержки. Но они не говорят, как они в конечном итоге выполняют вызов REST API к каким маршрутам REST. В вашем примере вы, по сути, определяете '/ api / methodA' '/ api / methodB' в apiRouting.js. Это ваш API для отдыха и возвращает jsons (правильно?). Вам нужно снова переопределить маршруты (URL-адреса) в response-routing в './routing.jsx' (чтобы указать, какие компоненты реагирования должны отображаться, когда). - person Morteza Shahriari Nia; 18.05.2015
comment
Таким образом, вы определяете набор маршрутов ./api на сервере для выдачи jsons (вызовов базы данных и серверного материала), и вы определяете обычные маршруты (без ./api) для отображения компонентов реакции на сервере, а затем и на клиенте. - person Morteza Shahriari Nia; 18.05.2015
comment
Вы можете экспортировать отдельный модуль с именами маршрутов и использовать его как на сервере, так и на клиенте. Таким образом вы избегаете дублирования строк. - person Tomas Kirda; 18.05.2015

arrow_upward
0
arrow_downward

Кроме того, существует библиотека, которая позволяет создавать свои API-интерфейсы изоморфным образом и повторно использовать их на клиенте и сервере без раздувания и разрушения пакета. Это то, что мы сейчас используем в большом одностраничном приложении.

Он называется изоморфин, и вы можете найти его здесь: https://github.com/d-oliveros/isomorphine < / а>.

Отказ от ответственности: я являюсь автором этой библиотеки.

person David Oliveros    schedule 28.07.2015