@barba/router с пользовательскими маршрутами неправильно маршрутизирует и показывает ошибку 404

Question

Я создал сайт с Barbajs v2 и я пытаюсь добавить пользовательские маршруты для сайта, но он показывает 404 стр.

Я написал код, сославшись на унаследованный пример barbajs (версия 2) для выполнения этого унаследованного примера Barba2 js

Я следую Barba.js маршрутная документация для пользовательских маршрутов

После того, как весь сайт кодирования работает нормально с переходами страниц, но пользовательские маршруты не работают должным образом, он всегда показывает страницу 404.

var routes = [{
    path: '/index',
    name: 'home'
}, {
    path: '/about',
    name: 'about'
}];

    // tell Barba to use the router with your custom routes
    barba.use(barbaRouter, {
        routes
    });
    barba.init({
        routes: routes,
        transitions: [{
            name: 'rytary',
            from: {

                // define a custom rule based on the trigger class
                custom: ({ trigger }) => {
                    return trigger.classList && trigger.classList.contains('use-custom-transition');
                },

                // define rule based on multiple route names
                route: [
                    'index',
                    'about'
                ]
            },
            to: {

                // define rule based on multiple namespaces
                namespace: [
                    'home',
                    'about'
                ]
            },
            leave: function (data) {
                var done = this.async();
                TweenMax.to(data.current.container, 1, {
                    css: {
                        display: 'none',
                        opacity: 0
                    },
                    onComplete: done
                });
            },
            enter: function (data) {
                var done = this.async();
                TweenMax.from(data.next.container, 1, {
                    css: {
                        display: 'block',
                        opacity: 1
                    },
                    onComplete: done
                });
            }
        }]
    });

<!-- index.html -->
<div data-barba="wrapper">
  <div data-barba="container" data-barba-namespace="home">
    <!-- put here the content you wish to change between your pages -->
    <h1>Home Page</h1>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- load some animation library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

<!-- load barba.js (this will use the latest UMD version of the library) -->
<script src="https://unpkg.com/@barba/core"></script>
<script src="https://unpkg.com/@barba/router"></script>


<!-- about.html -->
<div data-barba="wrapper">
  <div data-barba="container" data-barba-namespace="about">
    <!-- put here the content you wish to change between your pages -->
    <h1>About Page</h1>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- load some animation library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

<!-- load barba.js (this will use the latest UMD version of the library) -->
<script src="https://unpkg.com/@barba/core"></script>
<script src="https://unpkg.com/@barba/router"></script>