Encode sublinks in url to fix broken routes

src/client/utils/__tests__/getUrl.spec.js

@@ -74,6 +74,25 @@ describe('getUrl', () => {
 		expect(result).toBe('/styleguide/#/Documentation/%40foo%2Fcomponents');
 	});
 
+	it('should return a route path with encoded name if sections (hashPath) has inappropriate symbols', () => {
+		expect(
+			getUrl({ name: '@foo/components', slug, hashPath: ['@foo/bar-documentation'] }, loc)
+		).toBe('/styleguide/#/%40foo%2Fbar-documentation/%40foo%2Fcomponents');
+
+		expect(
+			getUrl(
+				{
+					name: '@foo/components',
+					slug,
+					hashPath: ['@foo/bar-documentation', '@foo/bar-activations-section'],
+				},
+				loc
+			)
+		).toBe(
+			'/styleguide/#/%40foo%2Fbar-documentation/%40foo%2Fbar-activations-section/%40foo%2Fcomponents'
+		);
+	});
+
 	it('should return a route path with a param id=foobar', () => {
 		const result = getUrl({ name, slug, hashPath: ['Documentation'], id: true }, loc);
 		expect(result).toBe('/styleguide/#/Documentation?id=foobar');

src/client/utils/getUrl.js

@@ -38,10 +38,11 @@ export default function getUrl(
 	}
 
 	if (hashPath) {
+		let encodedHashPath = hashPath.map(encodeURIComponent);
 		if (!id) {
-			hashPath = [...hashPath, encodedName];
+			encodedHashPath = [...encodedHashPath, encodedName];
 		}
-		url += `#/${hashPath.join('/')}`;
+		url += `#/${encodedHashPath.join('/')}`;
 	}
 
 	if (id) {