CODEWITHSUNDEEP
javascriptreactjsantd
Uzair Khan
Uzair Khan

Reputation: 2970

How to make TreeNode in Ant tree design as link?

I have a tree design from Ant Design, got everything done, but at some specific places I want the tree node to act as link, tried giving link directly, that didn't work. 

array.map((node) => {
   if(node.type !== 'last') {
      <TreeNode title={item.name} key={item.id} dataRef={item} />
   } else{
      <Link className="container" to={{ pathname: 'somepath'}}></Link>
  }

})

Upvotes: 3

Views: 4961

Answers (1)

Sasha
Sasha

Reputation: 5944

Not sure I fully understand what you need, but maybe pass Link as a title:

<TreeNode
    title={<Link className="container" to={{ pathname: 'somepath'}}>{item.name}</Link>}
    key={item.id}
    dataRef={item}
/>

is good enough?

Also there is onCheck and onSelect callbacks in TreeNode api, which can do redirect to specific url, i.e.:

class LinkAbleTreeNode extends PureComponent {
  onCheck = () => {
    props.history.push(props.url)
  }

  render() {
    return <TreeNode title={item.name} key={item.id} dataRef={item} onCheck={this.onCheck} />
  }
}

export default withRouter(LinkAbleTreeNode);

And pass url as a prop:

<LinkAbleTreeNode /*...tree node args... */ url='somepath' />

This solution require withRouter hoc to be added into application. But if you have available the router props in parent component, you can just pass them through.

UPDATE

For antd v4 only pass title prop with custom component is the acceptable solution.

Upvotes: 3

Related Questions