Hi,
Greetings from Syncfusion support.
Based on the information provided, we understand that you
want to set the TreeView's navigateUrl
property to <NavLink />. We would like to inform you that this property
is used to specify the mapping field for the navigateUrl, which is added as a
hyperlink for the TreeView node, and it only accepts a string value.
However, we have included the Sidebar with TreeView sample
to demonstrate the Sidebar routing with the TreeView Template support. Refer
the shared sample on your end and get back to us if you need any further
assistance.
Sample : https://stackblitz.com/edit/react-i4fxmt?file=src%2FApp.js
|
[App.js]
<TreeViewComponent
id="mainTree"
fields={fields}
expandOn="Click"
nodeTemplate={nodeTemplate}
/>
let data = [
{
nodeId: '01',
nodeText: 'Installation',
url: '/installation',
},
{
nodeId: '02',
nodeText: 'Deployment',
url: '/deployment',
}, …
];
const fields = {
dataSource: data,
id: 'nodeId',
text: 'nodeText',
child: 'nodeChild',
};
function nodeTemplate(data) {
return (
<div>
<NavLink className="linkTag" to={data.url}>
{data.nodeText}
</NavLink>
</div>
);
}
|
Regards,
Leo Lavanya Dhanaraj
