Routes on server & client side - React.js & Node.js

Question

I try to really understand how routes work with react-router on my react application and express on my node.js server.

React-router code :

import ..
import { Router, Route, IndexRoute, hashHistory, IndexRedirect, Redirect } from "react-router";

render(
  <Router history={hashHistory}>
    <Redirect from="/" to="/index"/>
    <Route path="/" component={App}>
        <IndexRoute component={NavBarTop} />
        <IndexRoute component={NavFilter} />
        <Route path="/index" component={Tickets} />
        <Route path="/ticket/:id" component={TicketInformations} />
        <IndexRoute component={InterventionsList} />
    </Route>
  </Router>,
document.getElementById('container'));

My server routing:

app.use('/', express.static(path.join(__dirname, '../client/')), function(res, eq) {
});

app.get('/test', function (req, res) {
  console.log("test");
  var data = getTickets(); // return a JSON
  res.end( data );
});

my react routing works perfectly, however I want to make a AJAX call to fill my components. For this I try to get a JSON from my node server. However the path 'test' doesn't work. My console.log is not called.

I don't know why, I probably didn't understantd how it really works. How can I create easily webservice to prepare my AJAX call ?

you have to call that api from your client side app.other than that that wont be called — sundar
– sundar, Commented May 26, 2016 at 13:53

Abu Md. Maruf Sarker · Accepted Answer · 2016-05-26 14:33:36Z

5

ReactJS applications are single-page applications (SPA) and, generally they are served from root ("/") of your express.js server. But, unlike any static webpage, a SPA don't call server for every route change, rather depends on virtual routes and it's own client-side route handlers. (if you wonder, why SPAs don't refresh page, this is the reason behind, somewhat). If a SPA uses any routes defined in its client-side route handlers, the express will always see it as the root route "/" and do nothing, actually it won't know anything, as browser won't make any request.

React-Router provides these virtual routes to ReactJS app.

In your code, when your React app goes from "/" to "/index" or any other routes defined using React-Router, it does not request express server for anything, rather everything is done over client-side/browser. That's why, even if you had a route defined as "/test" for ReactJS, it would not call server-side for anything.

(by the way, these virtual routes will also be used by React over server-side, if and only if you're using React's server-side rendering. But, express will not know about these. Express will always behave the same, whether you use client-side rendering or server-side rendering.)

Now, lastly, if you want your express route "/test" to be called, you'll have to make a fetch request towards the route, thus the route will be called. (have a look at isomorphic-fetch, if wondering which library to use)

Hope these come handy

answered May 26, 2016 at 14:33

Abu Md. Maruf Sarker

661 bronze badge

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

5 Comments

onedkr Over a year ago

Thanks a lot for your answer ! Everything is clear for me now. In fact I have to call a url in my AJAX call to fill my components, I imagined this solution (the route "/test" in my server). I will test isomorphic fetch. However is it a good way to do it in the react thinking ??

Abu Md. Maruf Sarker Over a year ago

Can you please elaborate your question, I mean, what is the way you're asking to be a good way?

onedkr Over a year ago

In fact I'm looking for a good way to fill my react component with data stored in my Mysql database. I though that AJAX call was a good way. So In my client side I call a url from my server which me return a JSON. However I juts began to inrfom me about the flux architecture. I'm a little bit lost so I asked if you think that make AJAX call in componentWillMount for example is a goog way to get data in react thinking in a flux architecture ? It look's weird to pass through a the isomorphic-fetch to call a url from my server. I have the feeling that it's not natural ...

Abu Md. Maruf Sarker Over a year ago

React doesn't control data. Generally flux-implementations are used to control data. ReduxJS and RelayJS are most used flux-implementations. Your idea of fetching data when "componentDidMount" is wired and works, but your opinion is right. Use flux-implementations to handle data more structurally. Though flux-implementations will use "isomorphic-fetch" to receive data (if you use), but React will not be aware of that. (I know this is a self-promoting, but you can see marufsarker.github.io/blog/posts/2016/05/09/… to know a little-bit about their works)

onedkr Over a year ago

I will see that. Thank's for your help :)

Collectives™ on Stack Overflow

Routes on server & client side - React.js & Node.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related