Renders an <a href>
link to the specified resource. The to
prop is passed to navigateTo
on click.
Props
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
a
tag.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>