How to separate React router and nodejs api

Question

I'm kind of new in react and trying to develop sample app based on reactjs + expressjs + nodejs referred by https://github.com/lmammino/judo-heroes but problem is when I'm trying to create webhook api for 3rd party application, react router showed me as 404 page.

server.js

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

and 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;

and when I called "localhost:3333/webhook", it gone to execute <Route path="*" component={NotFoundPage}/> as showed 404 error page.

Please help me how can I export webhook as individual api not related to react router?

Dylan Scott · Accepted Answer · 2017-01-20 18:38:01Z

1

This happens because you are trying to render client side routes in the same way you are for server side and this is causing a conflict between the routing in React + Express. I'd suggest you are probably using browserHistory and I would swap to hashHistory as this means the client side is rendered differently compared to express routes. By swapping to hash your routes in react become rendered via /#/index. This allows express to render API routes in the traditional format like /api/webhook. You can read more about histories here https://github.com/ReactTraining/react-router/blob/master/docs/API.md#histories

Hope this helps

Dylan

answered Jan 20, 2017 at 18:38

Dylan Scott

4582 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergey Lapin · Accepted Answer · 2017-01-16 11:08:54Z

0

You should mount your webhook router with a leading slash:

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

This should be executed before app.get('*', ... wildcard handler to prevent React app from being served and bootstrapped.

answered Jan 16, 2017 at 11:08

Sergey Lapin

2,7032 gold badges21 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to separate React router and nodejs api

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related