由于现在想将原有的jquery项目迁移到react，但是一些原有的js内容逻辑过于复杂，所以暂时只能沿用。

但是现在如果在组件中直接引用这些老的文件的话会各种报错，提示等等。。

所以我就想在index.html中动态插入这个js文件。

比如在a路由下我插入的a.js。
b路由下我换成b.js

请问各位大佬有什么方案？

可以尝试这样。

const P1 = () => {
    useEffect(() => {
        const sc = document.createElement('script')
        sc.src = 'a.js'
 sc.id = 'a'
 document.body.appendChild(sc)
    })
    return <div>p1</div>
}

或者这样

<Route path={'/p1'} render={(props)=>{
    const sc = document.createElement('script')
    sc.src = 'a.js'
     sc.id = 'a'
     document.body.appendChild(sc)
    console.log('1')
    return <P1/>
}}/>

1、如果是多页面的话 不存在这个问题 （母版页也不存在这个问题）
a.com/a 引用a.js
b.com/b 引用b.js

2、如果是spa的话 你上边说引用会报错，那就是通过import xx ,export xx 这种的方式在对应组件中引用是不行的了

那就只能在index.html中做文章了，

1. 新建一个js
2. 在html中引用该js
3. 然后在js中对当前url做判断，再将对应的js文件插入到页面里

每个js有一个唯一标识（id） 然后每次遍历前先移除当前已经添加的所有script标签，再插入最新的一个