Как отделить React router и nodejs api

Question

Я вхожу в новое реагирование и пытаюсь разработать пример приложения на основе reactjs + expressjs + nodejs, на которое ссылается https://github.com/lmammino/judo-heroes, но проблема в том, что я пытаюсь создать webhook api для сторонних разработчиков приложение, ответный маршрутизатор показал мне 404 страницы.

server.js

import routes from './routes'; 
... 
... 
var webhook = require('./routes/webhook'); 
app.use('webhook', webhook); 

и routes.js

'use strict'; 

import React from 'react' 
import { Route, IndexRoute } from 'react-router' 
import Layout from './components/Layout'; 
import IndexPage from './components/IndexPage'; 
import NotFoundPage from './components/NotFoundPage'; 

const routes = (
    <Route path="/" component={Layout}> 
    <IndexRoute component={IndexPage}/> 
    <Route path="*" component={NotFoundPage}/> 
    </Route> 
); 

export default routes; 

и когда я назвал "локальный: 3333/webhook", он пошел, чтобы выполнить <Route path="*" component={NotFoundPage}/>, как показали 404.

Пожалуйста, помогите мне, как я могу экспортировать webhook как отдельный api, не относящийся к ответному маршрутизатору?

Answer 1

Вы должны смонтировать webhook маршрутизатор с слэшем:

app.use('/webhook', webhook); 

Это должно быть выполнено до того app.get('*', ... подстановочных обработчика, чтобы предотвратить Реагировать приложение из обслуживаемых и бутстрапированных.

Answer 2

Это происходит из-за того, что вы пытаетесь отображать маршруты на стороне клиента так же, как и на стороне сервера, и это вызывает конфликт между маршрутизацией в React + Express. Я бы предположил, что вы, вероятно, используете browserHistory, и я бы поменял бы на hashHistory, так как это означает, что клиентская сторона визуализируется по-разному по сравнению с экспресс-маршрутами. Поменяв на хэш, ваши маршруты в реале превращаются в /#/index. Это позволяет выразить API маршрутов API в традиционном формате, таком как /api/webhook. Вы можете прочитать больше о истории здесь https://github.com/ReactTraining/react-router/blob/master/docs/API.md#histories

Надеется, что это помогает

Дилану