React Hooks应用部署VPS后刷新触发noscript、路由异常问题

两个异常为独立原因导致，和React Hooks本身无直接关联：

1. 路由参数变化但页面不更新 #

• 这是React Router v6的默认渲染逻辑：当访问路径匹配同一路由规则，仅动态路径参数（如:category）、查询参数变化时，React不会卸载重新挂载对应路由组件，只会触发组件重渲染。
• 如果ProductBrowsing组件中，获取路由参数、拉取分类商品数据的逻辑写在依赖为空的useEffect中（仅组件首次挂载时执行一次），参数变化时相关逻辑不会重新触发，就会出现URL更新但页面内容停留在旧状态的问题。
• 本地开发环境无该问题，是因为构建工具的dev server自带热更新能力，路由变化时会强制刷新组件状态，和生产环境运行逻辑存在差异。

2. 刷新页面提示"You need to enable JavaScript to run this app." #

• 这是Web服务器配置错误导致的。React构建出的单页应用只有一个入口文件index.html，所有路由跳转都是前端JS模拟的，生产环境必须配置服务器路由回退规则：无论请求什么路径，都优先返回根目录的index.html，再由前端React Router解析路径渲染对应页面。
• 当前配置下，刷新子路由路径时，服务器会去磁盘上找对应路径的静态文件，找不到就不会返回index.html，浏览器无法加载应用的JS bundle，就会直接渲染HTML模板里内置的<noscript>提示。

修复参数变化不渲染问题 #

• 调整组件内副作用逻辑的依赖项：将useParams()获取的动态参数、useSearchParams()获取的查询参数，加入对应数据拉取、状态重置useEffect的依赖数组，参数变化时自动重新执行逻辑。
• 如果需要让组件在参数变化时完全重置状态，可以给路由组件绑定和路径关联的key属性，强制参数变化时重挂载组件：

// 引入useLocation获取当前路径
import { useLocation } from 'react-router-dom';

// 给对应路由元素加key
<Route 
  path='/products/:category' 
  element={<ProductBrowsing key={useLocation().pathname} />}
/>

修复刷新页面报错问题 #

根据VPS上部署用的Web服务器，添加单页应用路由回退规则：

• Nginx环境：在站点配置的location /块中添加如下配置，之后重载Nginx服务即可

try_files $uri $uri/ /index.html;

• Apache环境：在站点根目录创建.htaccess文件，写入如下重写规则

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

配置完成后，所有路径的请求都会正确返回应用入口文件，刷新子路由也不会再出现noscript提示。

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