Question

我正在试验Angular应用中的反应。我目前正在使用ngReact在我的角度应用中加载反应组件。

我正在使用react-router (2.8.1)作为我应用的一部分。我创建了另一个部分，并且也想使用react-router。不幸的是，我遇到了问题，唯一可以工作并被识别的路由器是我访问的第一个路由器。这是我观察到的。

当我的应用加载主页时，两个路由器都会加载。我怎么知道？我在Router对象和console.log中添加了一个属性，用于创建路由器的文件中的属性。
如果我首先访问路由器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中？如果您需要更多信息，请发表评论。

Answer 1

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

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

第二个选项（不建议使用）：使用两个不同的入口点，每个入口点都运行自己的路由器。这将隔离您的每个应用程序，如果没有服务器往返，您将无法从一个“应用程序”转换到另一个应用程序。您必须设置您的webpack和服务器，以便它为/ users和/ onboarding提供不同的（入口）脚本。要链接到其他应用，您必须使用普通<a href>代替<Link to>。

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

1 个答案: