feat: add basename in anchors href

.changeset/few-heads-dress.md

@@ -0,0 +1,5 @@
+---
+'sv-router': patch
+---
+
+Add basename in anchors href

src/create-router.svelte.js

@@ -134,7 +134,7 @@ function navigate(path, options = {}) {
 
 	path = constructPath(path, options.params);
 	if (base.name === '#') {
-		path = new URL(path).hash;
+		path = new URL(path.replace('/#', '')).hash;
 	} else if (options.hash && !options.hash.startsWith('#')) {
 		options.hash = '#' + options.hash;
 	}
@@ -200,8 +200,10 @@ export async function onNavigate(path, options = {}) {
 		url.hash = options.hash || '';
 		if (base.name === '#') {
 			url.hash = path;
+		} else if (base.name && !path.startsWith(base.name)) {
+			url.pathname = join(base.name, path);
 		} else {
-			url.pathname = base.name ? join(base.name, path) : path;
+			url.pathname = path;
 		}
 		const historyMethod = options.replace ? 'replaceState' : 'pushState';
 		globalThis.history[historyMethod](options.state || {}, '', url.toString());

src/helpers/is-active.js

@@ -34,7 +34,7 @@ function compare(compareFn, pathname, params) {
 
 	if (params) {
 		if (base.name === '#') {
-			return compareFn(location.pathname, new URL(constructPath(pathname, params)).hash.slice(1));
+			return compareFn(location.pathname, constructPath(pathname, params).replace('/#', ''));
 		} else {
 			return compareFn(location.pathname, constructPath(pathname, params));
 		}

src/helpers/utils.js

@@ -13,11 +13,10 @@ export function constructPath(path, params) {
 	}
 
 	if (base.name === '#') {
-		const url = new URL(globalThis.location.toString());
-		url.hash = path;
-		url.search = '';
-
-		return url.toString();
+		if (path === '/') {
+			return '/#/';
+		}
+		return join('#', path);
 	}
 
 	return path;

tests/utils.test.js

@@ -31,27 +31,37 @@ describe('constructPath (hash-based)', () => {
 
 	it('should return the original path when no params are provided', () => {
 		const result = constructPath('/posts');
-		expect(result).toBe('http://localhost:3000/#/posts');
+		expect(result).toBe('/#/posts');
 	});
 
 	it('should replace a single param in the path', () => {
 		const result = constructPath('/posts/:id', { id: '123' });
-		expect(result).toBe('http://localhost:3000/#/posts/123');
+		expect(result).toBe('/#/posts/123');
 	});
 
 	it('should replace multiple params in the path', () => {
 		const result = constructPath('/posts/:id/comments/:commentId', { id: '123', commentId: '456' });
-		expect(result).toBe('http://localhost:3000/#/posts/123/comments/456');
+		expect(result).toBe('/#/posts/123/comments/456');
 	});
 });
 
 describe('constructUrl', () => {
 	it('should create a path with search and hash', () => {
+		base.name = undefined;
 		const result = constructUrl('/posts', {
 			search: { q: 'test' },
 			hash: 'hash',
 		});
-		expect(result).toBe('http://localhost:3000/#/posts?q=test#hash');
+		expect(result).toBe('/posts?q=test#hash');
+	});
+
+	it('should create a path with search and hash (hash-based)', () => {
+		base.name = '#';
+		const result = constructUrl('/posts', {
+			search: { q: 'test' },
+			hash: 'hash',
+		});
+		expect(result).toBe('/#/posts?q=test#hash');
 	});
 });