Router: Easier access to route() in class components

Is your feature request related to a problem? Please describe.

I want to switch to preact-iso’s router but find it’s very cumbersome to get a hold of its route() function in class components (as I can’t use useRoute()).

I’ve managed to do it, but it’s not pretty:

import { Component } from 'preact';
import { Router } from 'preact-iso';

class C extends Component {
  render() {
    return (
      <Router.Provider.ctx.Consumer>
        { ctx => (
          <div onClick={ event => ctx.route('/some/place') }>Click me!</div>
        )}
      </Router.Provider.ctx.Consumer>
    );
  }
}

Describe the solution you’d like

In preact-router, I could just do:

import { route } from 'preact-router'

and then use route() pretty much anywhere.

My guess is that preact-iso probably switched to useRoute() for a reason and that the import { route } isn’t entirely ‘compatible’ anymore, but I would appreciate it if there was a better way to get a hold of it 😃

Thanks!

[developit]

@rejhgadellaa ah! sorry, I messed up the example for #2 - it should be contextType (singular):

class C extends Component {
  static get contextType() { return LocationProvider.ctx; }

  render() {
    // ...
  }
}

or, if you’d like to avoid the getter:

class C extends Component {
  render() {
    // ...
  }
}

C.contextType = LocationProvider.ctx;

[developit]

@rejhgadellaa my suggestion here would be to move LocationProvider out of all of your components, and have one small root component that only renders the providers for your app:

function C() {
  return (
    <ErrorBoundary>
      <Router />
    </ErrorBoundary>
  );
}

export default function App() {
  return (
    <LocationProvider>
      <C />
    </LocationProvider>
  );
}