We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Problem with DialogComponent and react-router-dom

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

5 Replies

IS Indrajith Srinivasan Syncfusion Team January 20, 2020 12:30 PM UTC

Hi James, 
   
Currently, we validating the reported issue, will update further details shortly.  
   
Regards,
Indrajith
 



IS Indrajith Srinivasan Syncfusion Team January 20, 2020 05:00 PM UTC

  
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 



IS Indrajith Srinivasan Syncfusion Team January 22, 2020 12:08 PM UTC

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> 
 

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

Regards,
 
Indrajith 



AD adgr January 23, 2020 12:00 AM UTC

Yes, your workaround works.
Thanks for help.



IS Indrajith Srinivasan Syncfusion Team January 23, 2020 04:46 AM UTC

Hi Adgr,

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


Loader.
Live Chat Icon For mobile
Up arrow icon