route function from Preact-Router does not update window location or component

Question

I am trying to use the route function from preact-router in order to sanitize a hash prefix that I add. However, the route function does not seem to update the window location or the component that is rendered by the Router. Am I using this function wrong?

I am hosting my react build in an S3 bucket and using their redirecting rules to add a #! in between the base url and the path. Would using hash history instead of browser history and what are the downsides of hash history?

documentation

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

import Header from './header';

// Code-splitting is automated for `routes` directory
import Home from '../routes/home';
import Profile from '../routes/profile';
import Library from '../routes/library';
import LibraryCreator from '../routes/libraryCreator';

/**
 * Removes the #! injected into the url
 * A #! is prefixed to all requests sent to our S3 instance so that we send the index no matter what path is requested
 * This allows the Router component to handle Routing and prevents 404/403 errors from requesting files which don't exist
 * [More Info](https://via.studio/journal/hosting-a-reactjs-app-with-routing-on-aws-s3)
 */
const sanitizeHashPrefix = () => {
    const path = (/!(\/.*)$/.exec(location.hash) || [])[1];
    if (path) {
        route(path, true);
    }
}

const App = () => (
    <div id="app">
        <Header />
        <Router onChange={sanitizeHashPrefix()}>
            <Home path="/" />
            <Profile path="/profile/" user="me" />
            <Profile path="/profile/:user" />
            <Library path="/library/:library" />
            <LibraryCreator path="/library/newLibrary" />
        </Router>
    </div>
)

Answer 1

It looks like you are calling your change handler immediately rather than passing it as a callback. To fix, remove the parenthesis for the onChange.

- <Router onChange={sanitizeHashPrefix()}>
+ <Router onChange={sanitizeHashPrefix}>

You should now see it being called on each router change.

Here's a link to some documentation talking about your specific use.