React: This may happen if you return a Component instead of <Component /> from render

I Am Getting This Error Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it

And

Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.

Below picture is the index.ts code in the change-accouont folder in the pages folder. I want to open different pages here based on the parameters in the URL:

But when i enter the url, will show the below error.

Below is the DeleteAccountPage code:

Below picture is the createDeleteAccountPage code:

How to fix this error in react?

if DeleteAccountPage and ChangeAccountPage are Component you need change your code to :

export default ()=>{
    if(retrieverUrlParamValue(changeTypeQueryParamNode)){
        return <DeleteAccountPage />;
    }else{
        return <ChangeAccountPage />;
    }
}

for return a component like DeleteAccountPage

return <DeleteAccountPage />

You are not returning anything in your code blocks. You can do something like:

export default ()=>{
    if(retrieverUrlParamValue(changeTypeQueryParamNode)){
        return DeleteAccountPage;
    }else{
        return ChangeAccountPage;
    }
}

However you need to be careful how you use this code. Based on what you shared you'd need something like:

import AccountPage from 'the above file';

// Then in your render function
const conditionalComponent = AccountPage();
const FinalComponent = conditionalComponent(React.Fragment);
return <FinalComponent />;

This is arguably bad practice. Instead you should use component composition:

const DeleteAccountPage : FC<{ PageProvider: FC }> = ({ PageProvider }) => {
   return ( 
      <PageProvider>...</PageProvider>
   );
}

// ...

export default (props: { PageProvider: FC })=>{
    if(retrieverUrlParamValue(changeTypeQueryParamNode)){
        return <DeleteAccountPage {...props} />;
    }else{
        return <ChangeAccountPage {...props} />;
    }
}

This way to use this component you just need:

import AccountPage from 'the above index.ts file';

// ...
return <AccountPage PageProvider={React.Fragment} />