我正在尝试开发一个将其他“应用”作为“插件”的应用 . 此基本应用程序将仅包括基本身份验证路由,而其他应用程序将在其中定义自己的路由 .
我怎样才能用React实现这个目标?我想React Router可能有东西,但我找不到它 .
我来自Ruby on Rails世界,在那里我可以拥有一个宝石作为引擎,在基础应用程序上,我只是在给定路径上的引擎 mount
. 我正在寻找类似的东西,这样在我的基础 App.js
我可以简单地 import ModuleARoutes from 'module-a'
并以某种方式将其插入基础应用程序的 <Router>
组件,如:
<Router>
<ModuleARoutes path="/module_a" />
</Router>
任何指导都非常感谢!谢谢!
UPDATE
使用@ 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中):
然后每个子应用程序可以有自己的路由,依此类推 .