preact-router
preact-router copied to clipboard
preactjs
Allow a base path to be set so app can run on a sub directory
Hi,
I'm creating an app that will sit on many different sites, in partiular on sub directories like:
www.website.com/something/goes/here
In React Router you can set a basename property on the router so push state can work properly without directing the user back to the domain root, e.g:
basename="/something/goes/here"
Is there a way I can achieve this in preact-router? I haven't found any reference to this in the docs.
Thanks
I have the same problem, and I think the error is in the way the scripts are loaded in html. They have a / at the beginning which causes the relative location of the app in a subdirectory to be ignored. In my case I want to deploy to github pages and I can't. The generated code is in: https://github.com/libremesh/lime-app/tree/gh-pages
@Narutuffy As an interim measure, I've created a wrapper component for links and the router that takes a configured basepath and appends to routes passed in. Work's well but would prefer this to be part of the default components
Looks like this is in progress in #100. Hopefully that can get merged quickly.
It would be very convenient if the base path could be automatically picked from the href attribute of the <base> element, e.g.
<head>
<base href="/my-base-url/">
</head>
Base URLs may be automatically rewritten from bundlers (e.g. snowpack), making it unnecessary to manually set it up, always staying aligned with other places.
Maybe you'll fine this useful:
export const ROUTER_PREFIX = (new URL(import.meta.url)).pathname.match(/.*\//)[0];
export function urlPath(path: string) {
return ROUTER_PREFIX + path.replace(/^\//, '');
}
export function App() {
return (
<LocationProvider>
<div class="app">
<ErrorBoundary>
<Router>
<Route path={urlPath('/')} component={Home} />
<Route path={urlPath('about-us')} component={About} />
</Router>
</ErrorBoundary>
</div>
</LocationProvider>
);
}
