如何在同一應用程序內的不同迷你應用程序之間共享React Router

我正在嘗試在Angular應用程序中做出反應。我目前使用ngReact加載我的角度應用程序中的反應組件。如何在同一應用程序內的不同迷你應用程序之間共享React Router

我使用react-router (2.8.1)作爲我的應用程序的一部分。我創建了另一個部分，並希望使用react-router。不幸的是，我遇到了問題，唯一能工作並被識別的路由器是我訪問的第一臺路由器。這是我觀察到的。

這兩個路由器加載時，我的應用程序加載主頁。我怎麼知道？我向路由器對象和控制檯添加了一個屬性。在路由器創建的文件中記錄屬性。
如果我先訪問路由器A，則路由器A正常工作！當我使用路由器B訪問該頁面時，路由器B似乎不被識別並且不起作用，我得到錯誤「警告：[react-router]位置」/ RouteB「與任何路由都不匹配」。這solution did not work。
我是否需要將我的路由器重構爲一個大文件，其中包含我使用react-router的所有路由？這似乎是我需要重構一切，或者我錯過了一些東西。
我對後端路由更加熟悉，特別是使用express.Router創建實例並且不共享路由器。

這裏是我的兩個路由器的片段，用於我的應用的不同部分。

路由器A：

import React from 'react'; 
import {Router, Route, browserHistory, IndexRoute} from 'react-router'; 

/* Note, additional import statements for components */ 

const Routes =() => (
    <Router history={browserHistory}> 
    <Route path="/RouteA"> 
     <IndexRoute component={UserIndex} /> 
     <Route path=":RouteAId"> 
     <IndexRoute component={index} /> 
     <Route path="user" component={user} /> 
     <Route path="profile" component={profile} /> 
     <Route path="preview" component={previewUpdate} /> 
     <Route path="interest/:interestId/resume" component={CoverLetterRoute} /> 
     </Route> 
     <Route path="*" component={NoMatch} /> 
    </Route> 
    </Router> 
); 

export default Routes;

路由器B：

import React from 'react'; 
import {Router, Route, browserHistory, IndexRoute} from 'react-router'; 
import Main from '../components/Main'; 

const Routes =() => (
    <Router history={browserHistory}> 
    <Route path="/onboarding" component={Main} /> 
    </Router> 
); 

export default Routes;

是否有可能有兩個單獨的路由器也是這樣嗎？我是否需要將所有路線加載到一個Router？如果您需要更多信息，請發表評論。

來源

2017-10-12 HelloWorld

使用單個客戶端應用程序與單個路由器通過使用不同的路由。這將允許您更輕鬆地共享代碼，並從應用程序的一部分無縫鏈接到另一部分。您必須設置您的服務器才能爲/ users和/ onboarding提供相同的腳本。

var routes = (
     <Route handler={App}> 
     <Route path="https://stackoverflow.com/users/welcome" handler={Welcome} /> 
     <Route path="/onboarding"> 
      {/* onboarding routes here */} 
     </Route> 
     </Route> 
    );

第2個選項（不推薦，但是）：使用兩個不同的入口點，每個入口點運行自己的路由器。這會隔離您的每個應用程序，並且無需往返服務器，您將無法從一個「應用程序」轉換到另一個應用程序。您必須設置您的webpack和服務器，以便爲/ users和/ onboarding提供不同的（條目）腳本。而爲了鏈接到其他應用程序，您必須使用正常<a href>而不是<Link to>。

來源

2017-10-12 17:20:21

如何在同一應用程序內的不同迷你應用程序之間共享React Router

回答

相關問題