React + Sails：處理路線

我正在開發一個使用Sails和React的Web應用程序。我使用sails的主要目的是利用MVC模式，而React用於服務視圖。因爲，Sails提供了自己的路由，但我想使用我的React-router。React + Sails：處理路線

例如：在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' 


};

我完全新的這個框架，並不能找到足夠的資源online..So對不起這個愚蠢的問題。

來源

2015-10-21 Ricky

顯示您的Sails路由器代碼。可能的問題是，您沒有告訴Sails從您的React應用程序的index.html中提供所有**（通配符）請求。 – elithrar

@elithrar正如你所問，我已經添加了我的帆航線。請讓我知道..我需要做些什麼修改。 – Ricky

請參閱http://sailsjs.org/documentation/concepts/routes/custom-routes - 使用通配符路由 - '/ *' - * AFTER *您的'UserController'路由。 – elithrar

module.exports.routes = { 

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

你需要做一個通配符路線呈現每當API路線缺少反應的應用程序。 http://sailsjs.org/documentation/concepts/routes/custom-routes

來源

2016-07-19 06:21:59

通過https://stackoverflow.com/a/21951751/2377491

啓發創建帆新mySailsApp新帆應用
全殲mySailsApp /資產的文件夾
複製myReactApp的內容/ DIST文件夾中的內容到mySailsApp /資產
與那些myReactApp的更換mySailsapp /視圖/ layout.ejs的內容/距離/ index.html文件
剪切所有的非可控硅從layout.ejs文件IPT標記的內容（<body>標記之後和第一<script>標記之前，並用它的一切在layout.ejs

<body>

廣場<%-body%>

在你的config/routes.js，提出：

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

然後就可以開始在服務器帆舉，你會看到在http://localhost:1337的應用作出反應。

來源

2016-09-08 21:44:27 ebaynaud

如果您的API已經有其他路由，則必須將此屬性添加到新路由中：skipRegex：/^\/api\/.*$/ – ebaynaud

React + Sails：處理路線

回答

相關問題