开发者问题收集

React Router 从外部包挂载路由

2018-07-10
409

我正在尝试开发一款将其他“应用”作为“插件”的应用。此基础应用将仅包含基本身份验证路由,而其他应用将在其中定义自己的路由。

如何使用 React 实现此目的?我想 React Router 可以有一些东西,但我找不到它。

我来自 Ruby on Rails 世界,在那里我可以使用 gem 作为引擎,在基础应用上,我只需将引擎 mount 安装在给定路径上即可。我正在寻找类似的东西,这样在我的基础 App.js 上,我可以简单地 import ModuleARoutes from 'module-a' 并以某种方式将其插入基础应用的 <Router> 组件中,例如:

<Router>
    <ModuleARoutes path="/module_a" />
</Router>

任何指导都非常感谢!谢谢!

更新

使用 @felipe-lanza 的答案,我的 ModuleA 如下:

import React from 'react';
import { Route } from 'react-router';
import { BrowserRouter } from 'react-router-dom';

const Example1 = () => (<div>test 1</div>);
const Example2 = () => (<div>test 2</div>);

const App = () => (
  <BrowserRouter>
    <div>
      <Route exact path="/" component={Example1} />
      <Route exact path="/example1" component={Example2} />
    </div>
  </BrowserRouter>
);

export default App;
export { App as ExampleApp };

在我的基础应用程序中,我有

import MainStore from './stores/MainStore';
import AuthStore from './stores/AuthStore';

import App from './App';
import ExampleApp from '@module-platform/example';
const stores = { MainStore, AuthStore };
const Routes = () => (
    <Provider { ...stores }>
        <Router>
            <Switch>
                <Route exact path="/" component={ Login } />
                <Route path="/dashboard" component={ App } />
                <PrivateRoute path="/example_app" component={ ExampleApp } />
                <Route component={ NotFound } />
            </Switch>
        </Router>
    </Provider>
);

现在,如果我导航到 localhost/example_app ,我确实会得到预期的结果(带有“test 1”的 div)。但是,我预计导航到 localhost/example_app/example_1 会呈现带有“test 2”的 div,但它仍然呈现“test 1”。事实上,任何带有 localhost/example_app 的位置(例如 localhost/example_app/asdfasdfa )都会让我呈现“test 1”div。

我做错了什么?

1个回答

如果我理解正确的话,这难道不类似于将基础应用程序下的子应用程序渲染为不同的路由吗?

即(在您的index.js中):

<Router>
  <Route path='/' component={BaseApp}/>
  <Switch>
    <Route path='/child-path-1' component={ChildApp1}/>
    <Route path='/child-path-2' component={ChildApp2}/>
    <Route path='/child-path-n' component={ChildAppN}/>
  </Switch>
</Router>

然后每个子应用程序都可以有自己的路由,依此类推。

fsl
2018-07-10