React.js中第三方JS仅在单参数路径生效的问题求助

背景说明 #

我将一套HTML、CSS、JS模板转换为React应用，把模板中的asset文件夹复制到项目的public目录下，并在index.html的head中引入了相关JS文件：

<script src="assets/js/vendor/jquery.js"></script>
<script src="assets/js/vendor/waypoints.js"></script>
<script src="assets/js/bootstrap-bundle.js"></script>
<script src="assets/js/main.js"></script>

该配置在单参数或无参数路由（如localhost:3000/param1、localhost:3000/）下可正常工作，但在多参数路径（如localhost:3000/param1/param2）下第三方JS无法生效。

路由配置代码 #

我的路由配置如下：

const routes=[
    {path:'/', element:<Static></Static>,
    children:[
        {path:'/', element:<Index></Index>},
        {path:'/blog/:catId', element:<Blog></Blog>},
        {path:'/grid/:catId', element:<BlogGrid></BlogGrid>},
        {path:'/blogdetails/:subId', element:<BlogDetails></BlogDetails>}
        ]
    }
]

App.js相关代码 #

在App.js中，我引入useRoutes并使用上述路由配置：

const router=useRoutes(routes)
//some useEffect stuff here//
return <>
    {router}
</>

已尝试的方案 #

我尝试过在路由切换时或渲染组件的useEffect中执行JS代码，但未能成功。曾参考相关Issue但理解有限，现寻求可行解决方案。

内容的提问来源于stack exchange，提问作者benyamin