Ajax calls stop working while using MVC Custom routes

Question

I have defined custom routes for user friendly URLs.

But unable to call default route using ajax or on using Ajax.BeginForm() On removing custom routes, all works perfectly.

This is my RouteConfig.cs

 //product view route
            routes.MapRoute(
                name: "ProductView",
                url: "product/{product_name}/{id}",
                new { controller = "Product", action = "View", product_name = UrlParameter.Optional, id = UrlParameter.Optional },
                new[] { "NoveltyApp.Controllers" }
            );

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
                new[] { "NoveltyApp.Controllers" }
            );

Product View URL: http://localhost:56379/product/Camlin-Kokuyo-Acrylic-Color-Box---9ml-Tubes-1/1

ProductController.cs

 public string ProductReviews()
 {
    return "Product review list";
 }

Ajax call from Product view

<button type="button" class="btn btn-thm nf-pr-vi__btn" onclick="reviews()">Reviews</button>

<script>
function reviews() {
        $.ajax({
            url: '/Product/ProductReviews',
            type: 'GET',
            success: function (data) {
                alert(data);
            }
        });
    }
</script>

But on click button controller action not getting hit. Please help me out with a solution.