1. Home
  2. Forum
  3. React - EJ 2
  4. How to use React Link with Treeview

How to use React Link with Treeview

Hi,

Is it possible to use Link within the nodeTemplate of treeview? This is possibly related to this thread but unfortunately the topic owner did not respond. I'm also having this error "Error: Invariant failed: You should not use outside a ", here's a snippet of my code:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Switch, Link, Route } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
import { SidebarComponent, TreeViewComponent } from '@syncfusion/ej2-react-navigations';

class App extends Component {
     constructor() {
        this.dataMenuItems = [
            { text: 'Menu 1', url: '/menu-1' },
            { text: 'Menu 2', url: '/menu-2' },
            { text: 'Menu 3', url: '/menu-3' },
            { text: 'Menu 4', url: '/menu-4' }
        ];

         this.menuFields = {
            dataSource: this.dataMenuItems, 
            id: 'id', parentID: 'pid', text: 'name', 
            hasChildren: 'hasChild' 
        };
     }

     menuNodeTemplate(data) {
        return (
            <div>
                <div className="treeviewdiv">
                    <div className="textcontent">
                        <Link to={data.url}><span className="treeName">{data.text}span>Link>
                    div>
                div>
            div>
        );
    }

     render() {
          return (
               

                  <SidebarComponent ref={sidebar => this.sidebar = sidebar} id="sidebar-menu" type="Push" isOpen={true} 
                         enableDock={true} width="220px" target=".main-content-wrapper">
                      <TreeViewComponent fields={this.menuFields} nodeTemplate={this.menuNodeTemplate} cssClass="template-tree" />                            
                  SidebarComponent>
                  <div className="main-content-wrapper">
                            <div className="content">
                                <Switch>
                                    <Route path={`/menu-1`} component={FirstPage} />
                                    <Route path={`/menu-2`} component={SecondPage} />
                                    <Route path={`/menu-3`} component={ThirdPage} />
                                    <Route path={`/menu-4`} component={FourthPage} />
                                Switch>
                            div>
                        div>
               

          )
     }
}

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('rel='nofollow' href');
const rootElement = document.getElementById('root');

ReactDOM.render(
  <BrowserRouter basename={baseUrl}>
    <App />
  BrowserRouter>,
  rootElement);

3 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team June 18, 2020 11:03 AM UTC

Hi Cedric,  
 
Greetings from Syncfusion support. 
 
We have checked your requirement with TreeView component. We suspect that your requirement is to render the TreeView nodes via templates with routing to navigate to other the component pages or any website. Yes, it is possible to achieve it in TreeView component.  
 
To achieve your requirement, we suggest you to use the following solution to use TreeView nodes with routing links. You can pass the URL as an additional attribute in data source and can retrieve this URL using the getTreeData method. You can use this option to bind this URL as like a router link and can navigate the page in the nodeSelected event of TreeView. Please refer to the following code snippets.  
 
  hierarchicalData = [{ 
    "nodeId": "00", 
    "nodeText": "About", 
    "url": "about", 
  }, 
  { 
    "nodeId": "01", 
    "nodeText": "React", 
    "url": "angular", 
    "nodeChild": [{ 
      "nodeId": "01-01", 
      "nodeText": "Javascript", 
      "url": "home", 
    }] 
  }, 
  { 
    "nodeId": "02", 
    "nodeText": "Products", 
    "expanded": true, 
    "url": "hist", 
    "nodeChild": [{ 
      "nodeId": "02-01", 
      "nodeText": "Services", 
      "url": "topics" 
    }] 
  }];   
loadPage(args) { 
    var data = this.tree.getTreeData(args.node); 
    let routerLink = data[0].url; 
    this.props.history.push('/' + routerLink); 
  } 
 
Refer the sample link below. 
 
 
To know more about the TreeView component. Refer the below link. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
CE Cedric E June 19, 2020 02:00 AM UTC

Hi Sowmiya,

Thank you for your reply. The solution works for me.

Kind Regards,
Ced

SP Sowmiya Padmanaban Syncfusion Team June 19, 2020 04:35 AM UTC

Hi Cedric,  
  
Most Welcome. We are happy to hear that our provided solution resolved your problem. Please contact us, if you need any help from us. 
  
Regards,  
Sowmiya.P 


Loader.
Up arrow icon