Route Transitions

How would I transition from one route to another after an action is performed? I have seen transitionTo() being used when a RouterContainer is created, but what is the equivalent in preact? I am also looking at securing a route until someone logs in. I have seen the following for React, is there also an equivalent for the following?

static willTransitionTo(transition, params, query, callback) {
        if (!AuthStore.loggedIn()) {
            // go over to login page
            transition.redirect('/login', null, {
                redirect: transition.path
            });

[developit]

To redirect, you can use the route() method. The static willTransitionTo method from react-router is a little awkward (I believe they are looking at alternative ways to implement such things). My suggestion would be to use a high-order component that does the session check and conditionally renders the actual route component only if there is a valid session.

Here’s a simple example:

import { route } from 'preact-router';

const AuthenticatedRoute = ({ route }) => {
  if (!AuthStore.loggedIn()) {
    // redirect to login:
    setTimeout( () => route('/login'), 1);
    // don't render the route:
    return null;
  }
  // we're logged in, so render the route:
  return route;
}

You could also do the loggedIn() check asynchronously by firing it from componentDidMount() and setting the returned Boolean as a property in a stateful component.

---

Here’s a more complete example, using a generalized <AuthenticatedRoute /> high order component to wrap a given route in an auth check like you described:

import { Router, route } from 'preact-router';

class AuthenticatedRoute extends Component {
  componentWillMount() {
    let { check, login } = this.props;
    this.allowed = check();
    if (!this.allowed) route(login || '/');
  }
  render({ check, login, route:Route, ...props }) {
    return <div>{ this.allowed && <Route {...props} /> }</div>;
  }
}

const LoginRoute = () => <form>login form here</form>;

const AccountRoute = () => <div>secret account page</div>;

const Demo = () => (
  <Router>
    <LoginRoute path="/login" default />
    <AuthenticatedRoute
      path="/account"
      login="/login"
      check={AuthStore.loggedIn}
      route={AccountRoute} />
  </Router>
);

[donadley]

Hey, thanks for fixing the issue.