【问题标题】:React Router mount routes from external package来自外部包的 React Router 挂载路由
【发布时间】:2018-07-10 13:42:17
【问题描述】:

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

我怎样才能用 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。

我做错了什么?

【问题讨论】:

    标签: reactjs react-router


    【解决方案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>
    

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

    【讨论】:

    • 感谢您的回答,我相信它让我成功了一半。我将通过一些更新来编辑我的问题,如果你能帮助我一路走来,我将不胜感激 =)
    • 当你像这样嵌套路由时,路径不是相对的。只需在 ModuleA 中的当前路径之前添加“/example_app/”。这也应该防止 Example1 在每个路径中呈现。作为旁注,您可能不需要那个 .
    • 嗨@felipe-lanza 感谢您的帮助!我设法做到了,并将编辑我的答案
    猜你喜欢
    • 2018-08-27
    • 1970-01-01
    • 2023-03-13
    • 1970-01-01
    • 1970-01-01
    • 2023-02-17
    • 2021-07-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多