Redirect

Redirect is a component that immediately redirects the browser to the URL in its to property when it gets visible (its when property gets true). The redirection works only within the app.

Using Redirect

The following app demonstrates two different patterns for using Redirect.

  1. When you navigate to the "Redirect #1" page, it immediately redirects the app to the "Accounts" page. By default, the when property of Redirect (and any other component) is "true", so redirection immediately happens.
  2. The "Redirect #2" page expects you to click the button before redirecting. The button click sets the when property of Redirect to true, and redirection happens at that moment.
<App>
  <NavPanel>
    <NavLink to="/">Home</NavLink>
    <NavLink to="/accounts">Accounts</NavLink>
    <NavLink to="/products">Products</NavLink>
    <NavLink to="/redirect1">Redirect #1</NavLink>
    <NavLink to="/redirect2">Redirect #2</NavLink>
  </NavPanel>
  <Pages>
    <Page url="/">Home</Page>
    <Page url="/accounts">Accounts</Page>
    <Page url="/products">Products</Page>
    <Page url="/redirect1">
      <Redirect to="/accounts" />
      Redirecting to Accounts...
    </Page>
    <Page url="/redirect2">
      <Fragment var.clicked="{false}">
        <Button label="Click to redirect" onClick="clicked = true"/>
        <Redirect when="{clicked}" to="/accounts" />
        Redirecting to Accounts...
      </Fragment>
    </Page>
  </Pages>
</App>

Try the app!

Properties

to

This property defines the URL to which this component is about to redirect requests.

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

This component does not have any styles.