title: Nested Routes does not re render ParentComponent after Update And Delete Function?
body: <p>I am having with Re-render with parent functional component. My update and delete functions are handled in Redux after success execution does not re-render parent functional component</p>
  
  <pre><code>***This my Main component where i am getting clients from Api USing Redux it is working working
  import React, { Fragment,useEffect } from 'react'
  import {connect} from 'react-redux';
  import {getClients,deleteClient} from '../Redux//actions/clientActions';
  import {Spin,Table,Tag,Button} from 'antd';
  import { Link } from 'react-router-dom';
  import Moment from 'react-moment'
  
  const Clients =({getClients,deleteClient,client:{clients,loading},history})=&gt; {
  
      useEffect(()=&gt;{
          getClients()
      }
      ,[getClients]);
  
  
      const columns = [
          {
            title:'Company',
            dataIndex: 'companyName',
            key: 'companyName',
            render: text =&gt; &lt;a&gt;{text}&lt;/a&gt;,
          },
          {
            title: 'Type',
            dataIndex: 'type',
            key: 'type',
          },
          {
            title: 'Price Type',
            dataIndex: 'typePrice',
            key: 'typePrice',
          },
          {
              title: 'Partita Iva',
              dataIndex: 'partitaIva',
              key: 'partitaIva',
            },
            {
              title: 'Codice Fiscale',
              dataIndex: 'codiceFiscale',
              key: 'codiceFiscale',
            },
            {
              title: 'Name',
              dataIndex: 'name',
              key: '1',
            },
            {
              title: 'SurName',
              dataIndex: 'surname',
              key: '2',
            },
            {
              title: 'Address',
              dataIndex: 'address',
              key: '3',
            },
            {
              title: 'City',
              dataIndex: 'city',
              key: '3',
            },
            {
              title: 'Zip',
              dataIndex: 'zip',
              key: '4',
            },
            {
              title: 'Country',
              dataIndex: 'country',
              key: '5',
            },
            {
              title: 'Phone',
              dataIndex: 'phone',
              key: '6',
            },
            {
              title: 'Email',
              dataIndex: 'email',
              key: '7',
            },
          {
            title: 'Domains',
            key: 'domains',
            dataIndex: 'domains',
            render: domains =&gt; (
              &lt;span&gt;
                {domains&amp;&amp;domains.map(domain =&gt; {
                  let color = domain.length &gt; 5 ? 'geekblue' : 'green';
                  return (
                    &lt;Tag color={color} key={domain}&gt;
                      {domain.toUpperCase()}
                    &lt;/Tag&gt;
                  );
                })}
              &lt;/span&gt;
            ),
          },
          {
            title: 'Notes',
            dataIndex: 'notes',
            key: 'notes',    
          },
          {
              title: 'Creator Id',
              dataIndex: 'createdByID',
              key: 'createdByID',    
            },
            {
              title: 'Date',
              dataIndex: 'date',
              key: 'date',
              render:(text)=&gt;(
                &lt;&gt;
                &lt;Moment format='YYYY/MM/DD'&gt;{text}&lt;/Moment&gt;
                &lt;/&gt;
              ) 
            },
            {
              title: '',
              render:(record)=&gt;(
                &lt;&gt; 
                &lt;Button style={{
                  marginBottom:"5px"
                }} type="primary" ghost&gt;
                &lt;Link to={`/clients/update/${record._id}`}&gt;Update&lt;/Link&gt;
                &lt;/Button&gt;
             &lt;Button type="primary" style={{
                  marginBottom:"5px"
                }}  ghost&gt;
               &lt;Link to={`/clients/${record._id}`}&gt;Detail&lt;/Link&gt;
             &lt;/Button&gt;
            &lt;/&gt;
              )
            },
  
  
        ];
  
          return loading &amp;&amp; clients.length === 0 ? (
            &lt;div style={{
              position:"absolute",
              left:"50%",
              top:"50%",
              traverse: 'translate(-50%, -50%)'
            }}&gt;
               &lt;Spin/&gt;
            &lt;/div&gt;
             ):
              (
                  &lt;Fragment&gt;
                      &lt;Table pagination={{ defaultPageSize: 4, pageSizeOptions: ['10', '20', '30']}} columns={columns} dataSource={clients}  scroll={{ x: 1300 }}/&gt;
                  &lt;/Fragment&gt;
              )
  
  
  
  }
  
  const mapStateToProps = state =&gt;{
     return {
  
       client:state.client
  
      }
    }
  
  
  
  export default connect(mapStateToProps,{getClients,deleteClient})(Clients);
  </code></pre>
  
  <p>***This is my Detail Page and i am Implementing Delete Function function executes perfect and goes to main client but Clients Does not Update on Main Page After Deletion</p>
  
  <hr>
  
  <pre><code>import React, { Fragment,useEffect,useState } from 'react'
  import {connect} from 'react-redux';
  import {withRouter,useParams,useHistory,Redirect} from 'react-router-dom';
  import {getClient,deleteClient} from '../Redux/actions/clientActions'
  import { Card,Spin,Button,Modal } from 'antd';
  const gridStyle = {
      width: '33%',
      textAlign: 'center',
    };
  
  const ClientDetail =({client:{client},getClient,deleteClient,loading,history})=&gt; {
     let [visible,setVisible] = useState(false)
      let {id} = useParams()
      useEffect(()=&gt;{
          getClient(id)
      },[getClient,id])
  
  
    const handleDelete=()=&gt;{
      deleteClient(id)
     setVisible(true)
    }
  
    const handleOk = () =&gt; {
      setVisible(false)
      history.push('/clients')
    };
  
  
  
  
  
          return loading  &amp;&amp; client === null? (
              &lt;div style={{
                  position:"absolute",
                  left:"50%",
                  top:"50%",
                  traverse: 'translate(-50%, -50%)'
                }}&gt;
                   &lt;Spin/&gt;
                &lt;/div&gt;
          ): (
              &lt;Fragment&gt;
              &lt;Modal
              title="Confirmation Dailog"
            visible={visible}
          //   onOk={handleOk}
            footer={[
              &lt;Button key="back" onClick={handleOk}&gt;
                OK
              &lt;/Button&gt;,
            ]}
          &gt;
             &lt;p&gt;Client Has been Deleted Successfully...&lt;/p&gt;
          &lt;/Modal&gt;
                    &lt;Card style={{textAlign:"center",
                    marginTop:"2rem"
                    }} title="Client Detail"&gt;
  
      &lt;Card.Grid style={gridStyle}&gt;CompanyName: {client&amp;&amp;client.companyName}&lt;/Card.Grid&gt;
      &lt;Card.Grid  style={gridStyle}&gt;Type:{client&amp;&amp;client.type}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;PriceType:{client&amp;&amp;client.typePrice}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;PartitaIva:{client&amp;&amp;client.partitaIva}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;CodiceFiscale:{client&amp;&amp;client.codiceFiscale}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;Name:{client&amp;&amp;client.name}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;SurName:{client&amp;&amp;client.surname}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;Address:{client&amp;&amp;client.address}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;City:{client&amp;&amp;client.city}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;Zip:{client&amp;&amp;client.zip}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;Country:{client&amp;&amp;client.country}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;Phone:{client&amp;&amp;client.phone}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;Email:{client&amp;&amp;client.email}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;Domains1:{client&amp;&amp;client.domains[0]}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;Domains2:{client&amp;&amp;client.domains[1]}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;Domains3:{client&amp;&amp;client.domains[2]}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;Notes:{client&amp;&amp;client.notes}&lt;/Card.Grid&gt;
      &lt;Card.Grid style={gridStyle}&gt;CreatorID:{client&amp;&amp;client.createdByID}&lt;/Card.Grid&gt;
      &lt;Button type="danger" onClick={handleDelete} style={{ width: '40%',marginTop:"1rem",marginBottom:"1rem"}}&gt;Delete&lt;/Button&gt;
    &lt;/Card&gt;
              &lt;/Fragment&gt;
          )
  
  }
  const mapStateToProps=state=&gt;({
      client:state.client
  })
  export default connect(mapStateToProps,{getClient,deleteClient}) (withRouter(ClientDetail));
  
  </code></pre>