How can tab switching prevent re-request of data reactjs

when React implements a single page, the tabs switch the display content, and it is found that each switching option will re-request the interface, which is tantamount to refreshing the page. The routing public pages in my project are all independent router.js files, but the routing public pages in my project are all configured with other page routes. If logic is added, the routing logic of switching options in the router.js file routing page can be achieved. This doesn"t seem to be a good idea. Add something to the public file. What if I want to add a route to my page? How to do it

import React from "react";
class Index extends React.Component {
constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {}
  render() {
      <div>
         <ul>
           <li>A</li>
           <li>B</li>
           <li>C</li>
         </ul>
      </div>
  }
}
export default Index;
Mar.16,2021

what version of ReactRouter? are you using?

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-1e9e53f-19cb.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-1e9e53f-19cb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?