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
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e976c5-1653.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e976c5-1653.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?