CODEWITHSUNDEEP
expressreactjsreact-router
dace
dace

Reputation: 6373

How to send GET/POST requests using express and react router?

I currently have express set up to serve a static html page where my react components mount to. I'm also using react router because I have nested routes. For example:

enter image description here

I have an App component (green outline). Within that component, I'm rendering a Header component (orange outline) and a Footer component (red outline) and passing in a Review component (blue outline) through this.props.children.

My server.js file (express):

const express = require('express');

const app = express();

app.use(express.static('dist'));

const PORT = process.env.PORT || 3000;

app.listen(PORT, function() {
  console.log(`Listening on port ${PORT}...`);
});

My routes.js file (react-router):

import React from 'react';
import ReactRouter, {
  Router,
  Route,
  browserHistory,
  IndexRoute,
} from 'react-router';

import App from '../components/App';
import Home from '../components/Home';
import Review from '../components/Review';
import Game from '../components/Game';

const routes = (
  <Router history={browserHistory}>
    <Route path="/" component={App} >
      <IndexRoute component={Home} />
      <Route path="/game/:id" component={Game} />
      <Route path="/game/:id/review" component={Review} />
      <Route path="*" component={Home} />
    </Route>
  </Router>
);

export default routes;

My question is, I want to be able to make GET/POST requests (GET from the Game component to display all reviews from a db and POST to create a new review from the Review component), but where should that happen? I can't tell if it has to happen in my express routes because it seems to me that all express is doing is rendering the static html page and then react-router is taking over after that with handling which components to display.

Any and all help is greatly appreciated.

Upvotes: 5

Views: 14053

Answers (2)

mirza.adipradhana
mirza.adipradhana

Reputation: 421

I just wanna share my experience, hope it helps. I'm never doing a request on React Route although it can. So, I prefer to perform this action inside component itself on componentDidMount() method, in your case it will be on Game component.

My consideration is to make component reusable, especially if the the component is depends on the request. The benefit when you're implementing request inside the component is your component will automatically call for the request when it mount, wherever you're mounting the component on the route path.

Refers to my experience, you can also make a request on express as server side request, because there are particular condition that need to perform a request handling from server side. Such as handling Cross Origin Resource Sharing (CORS) issue when request to public API from client side, authentication request handling like using OAuth, and more.

If you're request is quite simple, I think request inside the component is sufficient. Hope it helps. Thank you

Upvotes: 0

omarjmh
omarjmh

Reputation: 13896

For the GET request, you can load initial data in a separate function, than load that data in after the component has mounted using componentDidMount like so:

class Game extends React.Component {  
  constructor() {
    this.state = { data: [] }
  }

  loadCommentsFromServer() {
    $.ajax({
       ....
      }
    });
  }

  componentDidMount() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  }
}

You can do simply have another function for the POST.

Upvotes: 3

Related Questions