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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Problem with DialogComponent and react-router-dom

Thread ID:

Created:

Updated:

Platform:

Replies:

150749 Jan 17,2020 10:28 PM UTC Jan 23,2020 04:46 AM UTC React - EJ 2 5
loading
Tags: Dialog
adgr
Asked On January 17, 2020 10:28 PM UTC

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 [Syncfusion]
Replied On January 20, 2020 12:30 PM UTC

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


Indrajith Srinivasan [Syncfusion]
Replied On 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 


Indrajith Srinivasan [Syncfusion]
Replied On 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 


adgr
Replied On January 23, 2020 12:00 AM UTC

Yes, your workaround works.
Thanks for help.


Indrajith Srinivasan [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon