Scrivito.LinkTag

Renders a CMS link.

Copy
<Scrivito.LinkTag to={Scrivito.Obj.root()}>
  Back to homepage
</Scrivito.LinkTag>

Renders an <a href> link to the specified resource. The to prop is passed to navigateTo on click.

Props

  • to (Obj, Link) – the CMS object or CMS link to visit when clicking the link.
  • New in 1.6.0params (Object) – used to build the query part of the URL.
  • onClick (Function) – your own event handler. This optional prop causes the specified function to be executed when the link is clicked. The function receives an event of the React.MouseEvent type. One can call preventDefault on the event to prevent the redirection.

Remarks

  • The children of the component are rendered as children of the a tag.
  • Other props are rendered as attributes of the resulting a tag.

Examples

Render a navigation list comprised of all children of a page:

Copy
<ul className="nav">
  {
    page.children.map(childObj =>
      <li key={ childObj.id() }>
        <Scrivito.LinkTag to={childObj}>
          { childObj.get("title") }
        </Scrivito.LinkTag>
      </li>
    )
  }
</ul>

New in 1.6.0Pass params:

Copy
<Scrivito.LinkTag to={Scrivito.Obj.root()} params={{ highlight: "navigation" }}>
  Back to homepage
</Scrivito.LinkTag>

Pass an onClick property to call a method when the link is clicked:

Copy
function sayHello(event) {
   alert('Hello') // After the alert, the redirection is performed
}

<li>
  <Scrivito.LinkTag to={obj} onClick={(event) => this.sayHello(event)}>
    { obj.get("title") }
  </Scrivito.LinkTag>
</li>
    

Suppress the redirection using preventDefault:

Copy
function sayHello(event) {
  event.preventDefault() // No redirection takes place
  console.log(event.defaultPrevented) // true
  alert('Hello')
}

<li>
  <Scrivito.LinkTag to={obj} onClick={(event) => this.sayHello(event)}>
    { obj.get("title") }
  </Scrivito.LinkTag>
</li>