Scrivito.LinkTag

Renders a CMS link.

<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.
params (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:

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

Pass params:

<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:

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:

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>