React+Node.js环境下多HTML页面均可访问摄像头的问题咨询

你使用的是Create React App（CRA）脚手架创建的项目，摄像头调用逻辑封装在App.js中，仅会在默认的首页index.html中加载执行：

• 你自行新增的index1.html~index5.html属于独立静态页面，没有挂载React应用，也没有引入包含摄像头逻辑的App.js相关代码，自然无法调用摄像头
• 直接复制首页head代码报错是因为head中的%PUBLIC_URL%是CRA编译期变量，仅在CRA处理的入口页面会被自动替换为实际路径，手动复制到自定义页面不会被解析，会导致资源路径错误

推荐优先使用单页路由方案，实现成本更低，跳转不会刷新页面，摄像头可以保持全程调用：

方案1：单页路由改造（推荐） #

1. 安装React路由依赖

npm install react-router-dom

2. 删掉你自行创建的index1.html~index5.html，不需要独立的HTML页面
3. 在React项目中配置路由，新增产品详情页组件：
   • 首页路径/：保留现有产品列表展示逻辑
   • 产品详情页路径/product/:id：根据路由参数id加载对应产品的5张展示图
4. 修改原来的跳转链接为路由跳转，避免页面刷新：

import { Link } from 'react-router-dom'

// 替换原来的a标签
<Link to="/product/1"> <img src="assets/prdt1.jfif" alt="product1"></Link>
<Link to="/product/2"><img src="assets/prdt2.jfif" alt="product2"></Link>
<Link to="/product/3"><img src="assets/prdt3.jfif" alt="product3"></Link>
<Link to="/product/4"><img src="assets/prdt4.jfif" alt="product4"></Link>
<Link to="/product/5"><img src="assets/prdt5.jfif" alt="product5"></Link>

改造后全程都是同一个页面挂载React应用，摄像头逻辑不会因为跳转失效，也不用重复写多套代码。

方案2：保留多页结构改造 #

如果一定要保留独立子页的结构，需要做如下修改：

1. 配置CRA多页打包，使用react-app-rewired修改webpack配置，给每一个子页配置独立的HTML入口，让CRA编译时自动把React依赖、App.js逻辑注入到所有子页中
2. 每个子页的结构必须和首页对齐，包含<div id="root"></div>挂载节点
3. 修改App.js逻辑，判断当前页面的URL参数，加载对应产品的展示图片

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