React js - pass values via Component and change Tab page

There are two ways of doing it

1. Store the currentTab, id in the component state. import React, { Component } from 'react'

       const TABS = {
         USERS: 'users',
         USER_DETAILS: 'userDetails'
       }
   
       class Users extends Component {
         state = {
           tab: TABS.USERS
           currentUserId: null
         }
   
         handleUserClick = (id) => {
           this.setState({ tab: TABS.USER_DETAILS, currentUserId: id })
         }
   
         render() {
           const { tab } = this.state
   
           if (tab.USER_DETAILS === TABS.USER_DETAILS && currentUserId) {
             return (
               ...
                 User Details UI
               ...
             )
           }
   
           return (
               ...
                 <Table>
                   ...
                     <td><button onClick={() => this.handleUserClick(id)} /></td>
                   ...
                 </Table>
               ...
             )
         }
       }
   

   2. If you are using react-router and can have a different page for each tab. (different URLs like .../users and .../users/:id for the user details.

      ...
      import { Link } from 'react-router-dom'
      ...
      
      const usersPage = (props) => {
         return (
           <table>
            ...
              <td>
                <Linkto={{
                    pathname: `/users/${id}`,
                  }}
                />
            ...
           </table>
      
         )
       }
      
      // user details page, use can use the useHistory hook from the react-router but for bravity I will just refer to the history
      const userDetailsPage = (props) => {
        ...
        const { match } = props
        const { id } = match.params.id
        ...
      }
      ...