如何修复querySelector在使用bootstrap scrollspy的链接与PHP常量之前＃

I'm working on PHP App(MVC) and i use constant to access my app link since i can't access this <a href="#about">About</a> from other page like blog.

I change the link to <a href="<?= APPURL ?>/#about">About</a>

But because I use bootstrap scrollpsy to highlight the current section in the navbar.

i get the error below onload and scrollpsy stop working.

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'example.com/#about' is not a valid selector.

I think it because Bootsrap expect " # " follow by id to work.

So I came out with this fix but i believe there has to be a better way but can figure it out.

//If the link request link is / or /index use <a href="#about>About</a>

<?php if(preg_match('/^(\\/)$|^(\\/index)$/um', $_SERVER['REQUEST_URI'])):?>

  <li class="nav-item">
    <a class="nav-link " href="#about" >ABOUT</a>
  </li>

<?php else : ?>
// Else use <a href="<?= APPURL; ?>/#about>About</a> for other page execpte home page

  <li class="nav-item">
    <a class="nav-link" href="<?= APPURL ?>/#about">ABOUT</a>
  </li>

<?php endif ?>

Scrollpsy work on the index.php file as expected after the above change but not on the blog. I guess i have to use a separate js function to highlight links when on a different page than homepage.

Is it ok to keep this code? I was thinking about using for loops and store the link in array.