Question

我正在使用react-router并了解基本知识，但是我试图了解当在不同区域中找到路由时如何正确加载/链接所有组件。

我有一个布局组件，其中包含一个Sidemenu，标题和内容组件。

它看起来像这样：

Masterlayout.js是永远不变的主页

return (

      <Layout>
           <SideMenu />
        <Layout>
          <Header>
            <HeaderItems />
          </Header>
          <Content>
             -- Load components here depending on the clicked SideMenu
          </Content>
        </Layout>
      </Layout>

  );

在SideMenu.js中

return (
    <Router>
      <Menu
        className="menu-container"
        mode="inline"
        defaultSelectedKeys={["1"]}
      >
        <Menu.Item key="1">
          <Icon type="test" />
          <span>first</span>
          <Link to="/first" />
        </Menu.Item>
        <Menu.Item key="2">
          <Icon type="clock" />
          <span>second</span>
          <Link to="/second" />
        </Menu.Item>
      </Menu>

      <Route path="/first" component={firstComponent}/>
      <Route path="/second" component={secondComponent}/>
    </Router>
  );

如何在Content中传递组件？链接到工作，但是它当前不加载组件。如果我在内容中加载SideMenu，则它会同时加载导航栏和组件。

Answer 1

在Masterlayout.js中

class LandingPageGroup(ClusterableModel):

    class Meta:
        ordering = ['name']

    name = models.CharField('Landing Page Group name', max_length=255)

    api_fields = [
        APIField('name'),
    ]

    def __str__(self):
        return self.name

class LandingPageBaseForm(WagtailAdminPageForm):
    new_landing_page_group = forms.CharField(required=False, label='New translation group')

class LandingPageBase(Page):
    base_form_class = LandingPageBaseForm
    landing_page_group = ParentalKey(
        'home.LandingPageGroup',
        on_delete=models.PROTECT,
        blank=True,
        null=True,
    )
    content_panels = [
        MultiFieldPanel(
            heading='Locale and Hreflang Group',
            [
                FieldRowPanel(
                    [
                        FieldPanel('landing_page_group', widget=forms.Select),
                        FieldPanel('new_landing_page_group'),
                    ],
                    help_text='Choose an existing landing page group OR create a new one'
                ),
            ],
        ),
    ]

在SideMenu.js中

<Layout>
    <SideMenu />
    <Layout>
        <Header>
           <HeaderItems />
        </Header>
        <Content>
            <Switch>
                <Route path="/first" component={firstComponent}/>
                <Route path="/second" component={secondComponent}/>
            </Switch>
        </Content>
    </Layout>
</Layout>

您应该在树的某处有一个return ( <Menu className="menu-container" mode="inline" defaultSelectedKeys={["1"]} > <Menu.Item key="1"> <Icon type="test" /> <span>first</span> <Link to="/first" /> </Menu.Item> <Menu.Item key="2"> <Icon type="clock" /> <span>second</span> <Link to="/second" /> </Menu.Item> </Menu> );。它不必位于路线附近。您可以将其放在Router中，在其中加载应用程序并将其呈现到dom

嵌套组件中的React-router加载组件

1 个答案: