diff --git a/app/assets/javascripts/repository/router.js b/app/assets/javascripts/repository/router.js
index c5646c3285063663fdf98cd646f5b992dd784852..38a596e229e5dead77bf64d77da36d3fee29192a 100644
--- a/app/assets/javascripts/repository/router.js
+++ b/app/assets/javascripts/repository/router.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import { escapeRegExp } from 'lodash';
 import { joinPaths } from '../lib/utils/url_utility';
 import IndexPage from './pages/index.vue';
 import TreePage from './pages/tree.vue';
@@ -27,7 +28,7 @@ export default function createRouter(base, baseRef) {
       {
         name: 'treePath',
         // Support without decoding as well just in case the ref doesn't need to be decoded
-        path: `(/-)?/tree/${baseRef}/:path*`,
+        path: `(/-)?/tree/${escapeRegExp(baseRef)}/:path*`,
         ...treePathRoute,
       },
       {
diff --git a/changelogs/unreleased/ph-212785-fixRepositoryBrowserBranchWithParentheses.yml b/changelogs/unreleased/ph-212785-fixRepositoryBrowserBranchWithParentheses.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4ec1bfa62efb27854146bd9710deed9c0e5e901e
--- /dev/null
+++ b/changelogs/unreleased/ph-212785-fixRepositoryBrowserBranchWithParentheses.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed repository browser not working with parentheses in branch name
+merge_request: 41591
+author:
+type: fixed
diff --git a/spec/frontend/repository/router_spec.js b/spec/frontend/repository/router_spec.js
index f2f3dda41d95657588e6427b6ce30f40cf120e9e..3c7dda05ca3d8f828efa510847e47ab42fbe87d2 100644
--- a/spec/frontend/repository/router_spec.js
+++ b/spec/frontend/repository/router_spec.js
@@ -4,12 +4,13 @@ import createRouter from '~/repository/router';
 
 describe('Repository router spec', () => {
   it.each`
-    path                           | branch      | component    | componentName
-    ${'/'}                         | ${'master'} | ${IndexPage} | ${'IndexPage'}
-    ${'/tree/master'}              | ${'master'} | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/master'}            | ${'master'} | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/master/app/assets'} | ${'master'} | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/123/app/assets'}    | ${'master'} | ${null}      | ${'null'}
+    path                           | branch          | component    | componentName
+    ${'/'}                         | ${'master'}     | ${IndexPage} | ${'IndexPage'}
+    ${'/tree/master'}              | ${'master'}     | ${TreePage}  | ${'TreePage'}
+    ${'/tree/feat(test)'}          | ${'feat(test)'} | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/master'}            | ${'master'}     | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/master/app/assets'} | ${'master'}     | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/123/app/assets'}    | ${'master'}     | ${null}      | ${'null'}
   `('sets component as $componentName for path "$path"', ({ path, component, branch }) => {
     const router = createRouter('', branch);