Geek Answers Handbook

React + Sails: route management

I am developing a web application using Sails and React. My main purpose for using sails is to use the MVC pattern, and React to view views. Since Sails provides its own routing, but I want to use my React router.

For example: in the response router NotFoundRoute , so when I access a page that is not there, it should show me the handler that I defined for NotFoundRoute . Instead, he shows me sails of 404 pages.

So, how do I get control of the sail route when I want to use the 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 am completely unfamiliar with these platforms and cannot find enough resources on the Internet. Sorry this stupid question.

+6
source share
2 answers
 module.exports.routes = { '/': { view: 'homepage' }, '/user/home/:id' : 'UserController.home' '/*' : 'ReactApp.home' };

you need to create a wildcard route that displays the response application when there are no api routes. http://sailsjs.org/documentation/concepts/routes/custom-routes

0
source

Inspired by fooobar.com/questions/110639 / ...

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

In your config / routes.js put:

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

Then you can start the server with the sails up and you will see the React application at http: // localhost: 1337 .

0
source

More articles:


All Articles