React + Sails : Handling Routes

Question

I'm developing a web application using Sails and React. My main purpose of using sails is take advantage of MVC pattern, while React for serving views. Since, Sails provides it own routing, but I want to make use of my React-router instead.

For ex : In react-router we have NotFoundRoute, so when I'm accessing a page which is not present, it should show me the handler that I have defined for NotFoundRoute. Instead, it is showing me the sails 404 page.

So how to get control over the sails route when I want to use my React route?

React Routes

var JSX = require('babel/register'),
    React = require('react'),
    Router = require('react-router'),
    DefaultRoute = Router.DefaultRoute,
    NotFoundRoute = Router.NotFoundRoute,
    Route = Router.Route;


var routes = (
        <Route name="splash" path="/" handler={require('../main')}>
            <DefaultRoute handler={require('../components/Signup/signup')} />   
            <Route name="signup" path="/user/signup" handler={require('../components/Signup/signup')} />    
            <Route name="home" path="/user/home/:id" handler={require('../components/Home/home')} />
            <NotFoundRoute handler={require('../components/commons/notFound')} />
        </Route>
    );

module.exports = routes;

Sails Routes

module.exports.routes = {


  '/': {
    view: 'homepage'
  },

  '/user/home/:id' : 'UserController.home'


};

I'm totally new to this frameworks and not able to find enough resources online..So sorry this silly question.

Show your Sails router code. The likely problem is that you haven't told Sails to serve **all** (wildcard) requests from the `index.html` of your React app. — elithrar, Oct 21 '15 at 08:10
@elithrar As you asked, I have added my sails routes. Pls let me know..what modification do I need to do. — Tushar, Oct 21 '15 at 08:51
See http://sailsjs.org/documentation/concepts/routes/custom-routes - use a wildcard route - `/*` - *AFTER* your `UserController` route. — elithrar, Oct 21 '15 at 10:33

score 0 · Answer 1 · edited Sep 15 '19 at 11:57

0

module.exports.routes = {
  '/': {
    view: 'homepage'
  },
  '/user/home/:id' : 'UserController.home'
  '/*' : 'ReactApp.home'
};

you need to make a wildcard route that renders the react app whenever api routes are missing. http://sailsjs.org/documentation/concepts/routes/custom-routes

edited Sep 15 '19 at 11:57

ravibagul91

20,072
5
36
59

answered Jul 19 '16 at 06:21

Blair Anderson

19,463
8
77
114

score 0 · Answer 2 · edited Sep 15 '19 at 11:57

Inspired by https://stackoverflow.com/a/21951751/2377491

Create a new Sails app with sails new mySailsApp
Wipe out the contents of the mySailsApp/assets folder
Copy the contents of myReactApp/dist folder into mySailsApp/assets
Replace the contents of mySailsapp/views/layout.ejs with those of the myReactApp/dist/index.html file
Cut all of the non-script tag content from the layout.ejs file (everything after the <body> tag and before the first <script> tag and use it to replace the contents of mySailsApp/views/homepage.ejs
Place <%-body%> after the <body> tag in layout.ejs

In your config/routes.js, put:

module.exports.routes = {
  '/*': {
    view: 'homepage',
    skipAssets: true
  }
}

You can then start the server with sails lift and you'll see the React app at http://localhost:1337.

If you have already other routes for your API, you have to add to the new route this attribute: skipRegex: /^\/api\/.*$/ — ebaynaud, Sep 09 '16 at 09:37

score 0 · Answer 3 · answered Jul 15 '20 at 21:48

0

While this is an older question, it is still relevant nearly 5 years later.

I recently open-sourced a base configuration of Sails/React/Bootstrap/Webpack, which could be useful to anyone that may stumble upon this question.

answered Jul 15 '20 at 21:48

NeoNexus DeMortis

1,286
10
26

React + Sails : Handling Routes

3 Answers3