Question

我有点新的反应并尝试基于https://github.com/lmammino/judo-heroes引用的reactjs + expressjs + nodejs开发示例应用程序，但问题是当我尝试为第三方创建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;

当我打电话给＆＃34; localhost：3333 / webhook ＆＃34;时，它显示执行<Route path="*" component={NotFoundPage}/>，显示404错误页面。

请帮助我如何将webhook导出为与反应路由器无关的个人api？

Answer 1

这是因为您尝试以与服务器端相同的方式呈现客户端路由，这导致React + Express中的路由之间发生冲突。我建议你可能正在使用browserHistory，我会交换到hashHistory，因为这意味着与快速路由相比，客户端的呈现方式不同。通过交换哈希您的路由反应将通过/#/index呈现。这允许express以传统格式呈现API路由，如/api/webhook。您可以在此处阅读有关历史的更多信息https://github.com/ReactTraining/react-router/blob/master/docs/API.md#histories

希望这有帮助

迪伦

Answer 2

您应该使用前导斜杠挂载webhook路由器：

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

这应该在app.get('*', ...通配符处理程序之前执行，以防止React应用程序被提供和引导。

如何分离React路由器和nodejs api

2 个答案: