RectJs | Make a button navigate to another page and show details

Question

I have developed a react table with some data and have added a "Show" button in each row. clicking the show button should display the selected row's data. This is kind of getting more information about the data. In the main page it shows all the orders in a table. By clicking the show button it should display only the selected row's data. This is like in gmail. when we click on each new email, it navigate to a new page containing only the selected email's data. Can the experienced ones help me with that?

import React,{ Component } from 'react';
import { Link } from "react-router-dom";
import './district.css';

import axios from 'axios'
import ReactTable from "react-table"; 
import 'react-table/react-table.css'
class Pharmacy extends Component{

  handleShow(){
   //What should go here?
         }

    constructor(props){
        super(props)
        let now=new Date()
        this.state = {
          orders: [],
          loading:true,
          date:now
}
   }
   async getOrdersData(){
        const res = await axios.get('https://localhost:44357/api/Orders/PharmacyId/1')
                console.log(res.data)
        this.setState({loading:false, orders: res.data})
      }
      componentDidMount(){
        this.getOrdersData()
      }
      

    render(){
        
        const columns = [ {  
            Header: 'Date',  
            accessor: 'dateTime',
           }
           ,{  
            Header: 'Cutomer Name',  
            accessor: 'customerName' ,
            },{
            Header: 'orderID',  
            accessor: 'orderID',
           }
           ,{ Header: 'PatientAge',  
         accessor: 'patientAge',
        },{  
          Header: 'Cutomer ID',  
          accessor: 'customerId' ,
          }
          ,{  
          Header: 'Telephone',  
          accessor: 'teleNo',
          },          
          {
            Header: '',
            Cell: ({row})=> (
                <div>
                  <button onClick={this.handleShow}>Show Order</button> 
                   
                </div>
            )
         },          
        ]

        return(

            <div className="container outer">
            
                <div className="container district inner">
                <div className="row">
                        <div className="container pharmacy">
                            <h1>Hello!</h1>
                            <p1>View your new orders</p1>
                        </div>  

                        <div className="container table">  
                        <ReactTable  
                            data={this.state.orders}  
                            columns={columns}  
                        />
                        </div>           
                 </div>
                   
                </div>

            </div>

            
        );
    }
}

export default Pharmacy