Question

我正在开发一个具有多个复杂模块的大型React应用程序。这些模块通常由URL的第一部分处理，如下所示：

    <Router history={history}>
      <Route path="/" component={AppFrame}>
        <IndexRoute component={Welcome} />
        <Route path="journal" component={Journal} />
        <Route path="map" component={MapComponent} />
        <Route path="import" component={Importer} />
        <Route path="plants" component={PlantsBaseData} />
      </Route>
    </Router>

此处有四个＆＃34;模块＆＃34;：/journal，/map，/import，/plants。

每个模块都由实现延迟加载的HOC包装，因此实现组件的JavaScript代码（例如，Journal）按需加载。

现在，某些模块（如PlantsBaseData组件）可以导航数据库记录，我喜欢/plants/:id这样的网址。

有没有办法在 PlantsBaseData中声明这样的路线 - 也就是说，在外部JavaScript＆＃34;文件＆＃34;当根<Router>初始化时尚未加载？

我试过这样的事情，但似乎不允许这样做：

const PlantsBaseData = () => { <SomeUIComponent> <AnotherUIComponent> <div>...</div> </AnotherUIComponent> <Router> <IndexRoute component={Hints} /> <Route path=":id" component={PlantForm} /> </Router> <SomeUIComponent> };

...因为<Router>需要强制history属性（但在此处再次设置它没有多大意义）。此外，在没有直接<Route>父母的情况下使用<Router>也不起作用。

如何做到这一点？

Answer 1

就像你说的那样

（但在这里再次设置它没有多大意义）

当您尝试嵌套<Router>时，这是没有意义的。一个应用程序应该只有一个路由器。在其中你可以有多条路线。要解决您的问题，您可以尝试以下方法。

<Router history={history}>
  <Route path="/" component={AppFrame}>
    <IndexRoute component={Welcome} />
    <Route path="journal" component={Journal} />
    <Route path="map" component={MapComponent} />
    <Route path="import" component={Importer} />
    <Route path="plants" component={PlantsBaseData}> 
      <Route path="/:id" component={yourComponent} />
    <Route/>
  </Route>
</Router>

在这里，你要<Route />而不是<Router />，这是不可能的。

如何嵌套<router>（不是<route>） - 或者，如何在外部文件中声明<route>？

1 个答案: