Pass DataTable Selected Row from Parent to child Record Page

Question

In my Lightning App Page I have an LWC with a data table of related Child Records. For the Child records I have built a custom Record Page.
I have embedded the Child Record Page on my Parent App Page and I would like to pass the record Id of the selected row.
How can I configure the Child Record Page so that it accepts the id from the parent and works as a Record Page?

Parent HTML

<template>
<div class="slds-grid slds-gutters">
    <div class="slds-col slds-size_1-of-12"></div>
    <div class="slds-col slds-size_10-of-12">
        <lightning-card title="Recent Career">
            <template if:true={werData}>
                <lightning-datatable 
                    key-field="Id" 
                    data={werData} 
                    columns={werColumns} 
                    onsave={handleSave}  
                    max-row-selection="1"                          
                    onrowselection={handleRowSelection}
                    >
                </lightning-datatable>
            </template>
        </lightning-card>
    </div>
</div>

<div class="slds-grid slds-gutters">
    <div class="slds-col slds-size_1-of-12"></div>
    <div class="slds-col slds-size_10-of-12">
        <div class="slds-box" if:true={werSelectedRow}>
            <c-test-record-edit></c-test-record-edit>
        </div>
    </div>
</div>

Parent JS

    import { LightningElement, wire, track} from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';

import getWerList from '@salesforce/apex/candidateWriteUp_Helper.getWorkExperienceRecentList';

const werColumns = [
    {
        label: 'Job Title',
        fieldName: 'werName',
        type: 'url',
        typeAttributes: {
            label: {
                fieldName: 'Name' 
            }, 
            target: '_self'
        }
    },  
    {
        label: 'Company',
        fieldName: 'werCompany',
        type: 'text',
        sortable: true
    },
    {
        label: 'Date From',
        fieldName: 'werDateFrom',
        type: 'date',
        sortable: true,
        typeAttributes: {
            year: "numeric",
            month: "2-digit",
            day: "2-digit"
        }
    },
    {
        label: 'Date To',
        fieldName: 'werDateTo',
        type: 'date',
        sortable: true,
        typeAttributes: {
            year: "numeric",
            month: "2-digit",
            day: "2-digit"
        }
    },
    {
        label: 'Industry',
        fieldName: 'werIndustry',
        type: 'picklistColumn',
        sortable: true,
        type: 'text',
        sortable: true
    },
    {
        label: 'Approximate Revenue',
        fieldName: 'werApproximateRevenue',
        type: 'picklistColumn',
        sortable: true,
        type: 'text',
        sortable: true
    }
];

export default class TestParetnPage extends LightningElement {

    @track recordId='';
    @wire(CurrentPageReference)
    currentPageReference; 

    get recordIdFromState(){
       return this.currentPageReference &&
           this.currentPageReference.state.c__recordId; 
    }
    renderedCallback(){
        if(this.recordId===''){
            this.recordId=this.recordIdFromState;
            console.log(this.recordId);
        }
    }

    werData = [];
    werColumns = werColumns;
    werDraftValues = [];
    werWiredList;
    werSelectedRow = false;

    @wire(getWerList, { searchKey: '$recordId' })
    wiredWer(werResponse) {
        this.werWiredList = werResponse;
        const data = werResponse.data;
        const error = werResponse.error;

        if (data) {
            let werTempList = []; 
            
            data.forEach((record) => {
                let werTempRec = Object.assign({}, record);  
                    werTempRec.werName = '/' + werTempRec.Id;
                    werTempRec.werCompany = werTempRec.Company_Name__c;
                    werTempRec.werDateTo = werTempRec.Date_To__c;
                    werTempRec.werDateFrom = werTempRec.Date_From__c;
                    werTempRec.werIndustry = werTempRec.Industry__c;
                    werTempRec.werApproximateRevenue = werTempRec.Approximate_Revenue__c;
                werTempList.push(werTempRec);
                
            });
            
            this.werData = werTempList;
            this.error = undefined;

            console.table(this.werData);

        } else if (error) {
            this.error = result.error;
        }
    }
    handleRowSelection = event => {
        var selectedRows=event.detail.selectedRows;
        if(selectedRows.length>1)
        {
            var el = this.template.querySelector('lightning-datatable');
            selectedRows=el.selectedRows=el.selectedRows.slice(1);
            event.preventDefault();
            return;
        }
        this.werSelectedRow=true;
    }
}

Record Edit HTML

<template>
<lightning-record-edit-form record-id={recordId} object-api-name="Work_Experience__c"
onsuccess={handleSuccess} onsubmit ={handleSubmit}>
<lightning-messages></lightning-messages>


    <lightning-card  title="Overview">
        <div class="slds-grid slds-gutters">
        <div class="slds-col slds-size_1-of-4">
            <lightning-input-field field-name="Name" onchange={handleChange}></lightning-input-field>
        </div>
        <div class="slds-col slds-size_1-of-4">
            <lightning-input-field field-name="Date_From__c" onchange={handleChange}></lightning-input-field>
        </div>
        <div class="slds-col slds-size_1-of-4">
            <lightning-input-field field-name="Date_To__c" onchange={handleChange}></lightning-input-field>
        </div>
        <div class="slds-col slds-size_1-of-4">
            <lightning-input-field field-name="Company_Name__c" onchange={handleChange}></lightning-input-field>
        </div>
        </div>
    </lightning-card>

</lightning-record-edit-form>

Record Edit JS

import { LightningElement, api, wire} from 'lwc';

export default class TestRecordEdit extends LightningElement {
    @api recordId;
}

Answer 1

Just add the recordId from the parent:

<c-test-record-edit record-id={recordId}></c-test-record-edit>

And in your handler, set the ID:

this.recordId = selectedRows[0].Id;

This should be all the changes you need to make.