ant-mobile顶部导航和底部导航内容是同一个怎么办？

Question

ant-mobile顶部导航和底部导航内容是同一个怎么办？

底部菜单放了个 <ArticleList />

<TabBar>
   <TabBar.Item>
      <ArticleList />
   </TabBar.Item>
</TabBar>        

顶部菜单也放了个 <ArticleList />

function TopTabs() {
  const tabs = [
    { title: '首页' },
    { title: '频道1' },
    { title: '频道2' },
    { title: '频道3' },
    { title: '频道4' },
    { title: '频道5' },

  ];

  return (
    <>
      <WhiteSpace />
      <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={6} />}>
        <ArticleList />
      </Tabs>
      <WhiteSpace />
    </>
  );
}

这两个<ArticleList />是同一个组件，怎么让它只显示一个？我想使用react-router v4，但不知怎么和antd-mobile结合。