Problem with DialogComponent and react-router-dom

[adgr]

Hi,

I have app with three pages. On one of them is component DialogComponent (with props visible={false}).

To switch between pages I use react-router-dom.

When I switch (via menu which is build with Link from react-router-dom) to page with DialogComponent and switch back to another page it displays no content of this page but totally empty page or only content from DialogComponent (it depends of @syncfusion/ej2-react-popups version - on version 17.3.34 displays content of dialog, on version 17.4.43 displays empty page).

Browser console shows error: "NotFoundError: Node was not found".

In attachment is simple project with this problem.

How can I use DialogComponent with react-router-dom?

Attachment: dialogproblem_8d4709e1.zip

[Indrajith Srinivasan]

Hi James, 

   

Currently, we validating the reported issue, will update further details shortly.  

   

Regards,
Indrajith 

[Indrajith Srinivasan]

  

Hi Adgr,

Greetings from Syncfusion support 

 

We have validated the reported issue and able to reproduce from our end, this issue occurs when enclosing it with the react fragments it works fine if enclose with <div> tag. Currently we are validating this issue within fragments and will update further details in two business days (22-01-2020) Wednesday. 

 

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Adgr,

Good day to you 

 

We have validated the issue, the Dialog is rendered by default with document.body as target. The console error “NotFoundError: Node was not found” is because the wrappers are modifying the DOM outside or React, hence enclosing the dialog inside a <div> tag will solve this issue. We have also prepared a sample based on your requirement.

https://reactjs.org/docs/integrating-with-other-libraries.html 

 

<div> 

   <DialogComponent> 

       ... 

       ... 

   </DialogComponent> 

</div> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/150749/ze/ReactDialogRouter-1270401919  

Can you please try out the above solution and let us know if you face any difficulties.

Regards, 

Indrajith 

[adgr]

Yes, your workaround works.

Thanks for help.

[Indrajith Srinivasan]

Hi Adgr,

Thanks for the update. Please get back to us if you need any further assistance on this. 

 

Regards, 

Indrajith