使用react-router-dom的useNavigate()导致文件路径丢失问题求助

问题根源 #

你遇到的图片显示异常、CSS刷新后丢失的核心原因是路由跳转使用了相对路径：
当你在非根路径（比如/movies、/tv）提交搜索表单时，navigate(search/${value})会生成相对当前路径的URL（比如/movies/search/xxx），而非预期的根路径下的/search/xxx。这会导致两个问题：

• 路由匹配错误：实际访问的路径和你定义的/search/:nome路由不匹配，可能触发错误的组件逻辑
• 资源加载路径错误：CSS、图片等静态资源如果使用根相对路径（比如/css/reset.css），浏览器会基于当前错误的URL去请求（比如/movies/css/reset.css），自然找不到资源，出现样式丢失、图片加载失败的情况。

解决步骤 #

1. 修正跳转路径为绝对路径
   修改handleSubmit中的navigate调用，在路径前添加斜杠，确保跳转到根路径下的search路由：

   const navigate = useNavigate();
   function handleSubmit(event) {
     event.preventDefault();
   
     navigate(`/search/${value}`); // 添加开头的斜杠，转为绝对路径
   }
   

2. 验证资源路径正确性
   即使你提到图片用了绝对路径，建议再次确认：

   • 本地静态资源使用根相对路径（以/开头，比如/assets/images/poster.jpg），而非相对路径（比如assets/images/poster.jpg）
   • 远程资源确保是完整的HTTP/HTTPS链接（比如https://example.com/images/poster.jpg）

3. 确认路由匹配
   跳转后检查浏览器地址栏，确保URL格式为/search/你的搜索关键词，和你定义的/search/:nome路由完全匹配。

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