I have created a react sideBar with TreeView, but it breaks upon navigation

[pranav]

Using the https://ej2.syncfusion.com/react/documentation/sidebar/how-to/sidebar-with-treeview, I created react sideBar, I am getting this error when I click on a node to navigate to a different

<TreeViewComponent id='main-treeview' ref={treeviewobj} fields={fields} expandOn='Click'

nodeTemplate={nodeTemplate}

nodeSelected={nodeSelected}

animation={false}

/>

function nodeSelected(e) {

if (e?.nodeData && !e.nodeData.hasChild) {

const url = fetchUrl(e.nodeData.id)

setCurrNode(url)

if (url) {

navigate(url.rel='nofollow' href)

}

}

},

[LeoLavanya Dhanaraj]

Hi Pranav,

Greetings from Syncfusion support.

We don't get the exact error you are facing at your end in the update. However, with the provided details, we have prepared a sample to reproduce your navigation issue with the TreeView component. However, without knowing the customization within the navigate, fetchUrl, and setCurrNode methods, we are unable to replicate your issue.

From the shared code, we understand that you are trying to perform navigation when clicking on a tree node. To meet this need, we suggest using the built-in navigateUrl property of our TreeView. You should specify the mapping field for the navigateUrl, which is added as a hyperlink for the TreeView node and accepts only a string value. This property is used to navigate from one page to another based on the selected node's text and its corresponding URL link mapped in the data source.

Check out the below mentioned code snippets and sample for your reference.

Sample : https://stackblitz.com/edit/react-uzsgu6ni-pz9qd52a?file=App.js

<TreeViewComponent

  id="main-treeview"

  ref={(Treeview) => (treeviewobj = Treeview)}

  fields={fields}

  expandOn="Click"

  nodeTemplate={nodeTemplate}

  nodeSelected={nodeSelected}

  animation={false}

/>

 

let fields = {

  dataSource: data,

  id: 'nodeId',

  text: 'nodeText',

  child: 'nodeChild',

  navigateUrl: 'navURL',

};

function nodeTemplate(data) {

  return (

    <div>

      <div className="ename">{data.nodeText}</div>

    </div>

  );

}

function nodeSelected(e) {

  if (e?.nodeData && !e.nodeData.hasChild) {

    //   const url = fetchUrl(e.nodeData.id);

    //   setCurrNode(url);

    //   if (url) {

    //     navigate(url.rel='nofollow' href);

    //   }

  }

}

Refer the shared details and if you are still facing any issues, share the issue replicated sample along with the customization details. This information will help us to validate and provide a prompt solution.

Regards,

Leo Lavanya Dhanaraj