Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow a base path to be set so app can run on a sub directory #279

Open
jahilldev opened this issue May 9, 2018 · 7 comments
Open

Allow a base path to be set so app can run on a sub directory #279

jahilldev opened this issue May 9, 2018 · 7 comments

Comments

@jahilldev
Copy link

jahilldev commented May 9, 2018 •
edited
Loading

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
@gmarcos87
Copy link

gmarcos87 commented May 17, 2018 •
edited
Loading

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

@gmarcos87 gmarcos87 mentioned this issue May 19, 2018
Closed
@Narutuffy
Copy link

I'm facing the same problem too

@jahilldev
Copy link
Author

@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

@tmartin2089
Copy link

@jhdevuk any further info you can give on this fix?

@pmkroeker
Copy link
Contributor

Looks like this is in progress in #100. Hopefully that can get merged quickly.

@knoan
Copy link

knoan commented Mar 22, 2021

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.

@aduth aduth mentioned this issue Aug 25, 2021
Merged
@ettoredn
Copy link

ettoredn commented Apr 14, 2022 •
edited
Loading

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>
	);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@ettoredn @tmartin2089 @knoan @pmkroeker @gmarcos87 @jahilldev @Narutuffy