如何在同一应用程序内的不同迷你应用程序之间共享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？如果您需要更多信息，请发表评论。

答

使用单个客户端应用程序与单个路由器通过使用不同的路由。这将允许您更轻松地共享代码，并从应用程序的一部分无缝链接到另一部分。您必须设置您的服务器才能为/ users和/ onboarding提供相同的脚本。

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

第2个选项（不推荐，但是）：使用两个不同的入口点，每个入口点运行自己的路由器。这会隔离您的每个应用程序，并且无需往返服务器，您将无法从一个“应用程序”转换到另一个应用程序。您必须设置您的webpack和服务器，以便为/ users和/ onboarding提供不同的（条目）脚本。而为了链接到其他应用程序，您必须使用正常<a href>而不是<Link to>。

如何在同一应用程序内的不同迷你应用程序之间共享React Router

相关推荐