What if the top navigation and the bottom navigation of ant-mobile are the same?

what if the top navigation and bottom navigation of ant-mobile are the same?

clipboard.png

put a < ArticleList / >

on the bottom menu.
<TabBar>
   <TabBar.Item>
      <ArticleList />
   </TabBar.Item>
</TabBar>        

there is also a < ArticleList / >

on the top menu.
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 />
    </>
  );
}

these two < ArticleList / > are the same component, how to make it show only one? I want to use react-router v4, but I don"t know how to combine it with antd-mobile.

Mar.24,2022
Menu