Question

我正在使用Sails和React开发Web应用程序。我使用sails的主要目的是利用MVC模式，而React则用于提供视图。因为，Sails提供了自己的路由，但我想使用我的React-router。

例如：在react-router中我们有NotFoundRoute，因此当我访问不存在的页面时，它应该显示我为NotFoundRoute定义的处理程序。相反，它向我展示了404页面。

那么当我想使用我的React路线时，如何控制帆路线？

反应路线

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;

航行路线

module.exports.routes = {


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

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


};

我对这个框架完全陌生，无法在线找到足够的资源。对不起这个愚蠢的问题。

Answer 1

module.exports.routes = {

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

你需要制作一个通配符路由，当缺少api路由时，该路由会呈现react应用程序。 http://sailsjs.org/documentation/concepts/routes/custom-routes

Answer 2

受https://stackoverflow.com/a/21951751/2377491启发

使用sails new mySailsApp
清除mySailsApp / assets文件夹的内容
将myReactApp / dist文件夹的内容复制到mySailsApp / assets
将mySailsapp / views / layout.ejs的内容替换为myReactApp / dist / index.html文件的内容
从layout.ejs文件中删除所有非脚本标记内容（<body>标记之后和第一个<script>标记之前的所有内容，并使用它来替换mySailsApp / views /的内容homepage.ejs
将<%-body%>放在layout.ejs

<body>

在你的config / routes.js中，输入：

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

然后，您可以使用风帆升降机启动服务器，您将在http://localhost:1337看到React应用。

Answer 3

虽然这是一个比较老的问题，但在将近5年后仍然有意义。

我最近开放了Sails/React/Bootstrap/Webpack的基本配置的源代码，这对任何偶然发现此问题的人都可能有用。

React + Sails：处理路由

3 个答案: