Using <Match /> before <Route history={createHashHistory()} /> will try to match non-hash history so the <Router /> component must be rendered before using match.
import Router from 'preact-router';
import Match from 'preact-router/match';
// this will fail
// when rendering https://host/path#/subpath it will take /path
render(
<div>
<Match>{({ path }) => <pre>{path}</pre>}</Match>
<Router history={createHashHistory()}>
<div default>demo fallback route</div>
</Router>
</div>
);
// this will match correctly
// when rendering https://host/path#/subpath it will take /subpath
const customHistory = createHashHistory()
render(
<div>
<Router history={customHistory} />
<Match>{({ path }) => <pre>{path}</pre>}</Match>
<Router history={customHistory}>
<div default>demo fallback route</div>
</Router>
</div>
);
Using
<Match />
before<Route history={createHashHistory()} />
will try to match non-hash history so the<Router />
component must be rendered before using match.Also
<Link />
activeClassName is affectedRepository https://github.com/sebasjm/preact-router-match-history-issue To reproduce, go to profile and refresh the page. The upper header will take the path as / but the lower header will take the correct one.
Using preact-router@3.2.1
Maybe exporting an init function to set this
customHistory
before rendering? https://github.com/preactjs/preact-router/blob/main/src/index.js#L14