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?
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>
)
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.