react-router-dom的useNavigate()导致我的文件路径丢失。

huangapple
go评论104阅读模式
英文:

react-router-dom's useNavigate() is causing my file paths to get lost

问题

所以基本上，我有一个搜索栏组件，当提交表单时，我使用useNavigate将页面重定向到路径/search/:name。问题是，当我到达这个页面时，其他路径上正常工作的图像在这里出现问题。而且，如果我重新加载页面，CSS 重置也会丢失。

handleSubmit:

  1.   const navigate = useNavigate();
  2.   function handleSubmit(event) {
  3.     event.preventDefault();
  5.     navigate(`search/${value}`);
  6.   }

App:

  1. <div className={styles.app}>
  2.       <BrowserRouter>
  3.         {/* Menu e Search deve permanecer em todas as rotas */}
  4.         <Menu />
  5.         <Search />
  6.         <div className={styles.appMain}>
  7.           <Routes>
  8.             <Route path="/" element={<Home />} />
  9.             <Route
  10.               path="/movies"
  11.               element={
  12.                 <Catalogue
  13.                   content={content.movies}
  14.                   catalogueApi={content.movies.catalogueApi}
  15.                   slideApi={content.movies.slideApi}
  16.                 />
  17.               }
  18.             />
  19.             <Route
  20.               path="/tv"
  21.               element={
  22.                 <Catalogue
  23.                   content={content.tv}
  24.                   catalogueApi={content.tv.catalogueApi}
  25.                   slideApi={content.tv.slideApi}
  26.                 />
  27.               }
  28.             />
  29.             <Route path="/bookmark" element={<Bookmark />} />
  30.             <Route path="/search/:nome" element={<SearchResults />} />
  31.             <Route path="*" element={<NotFound />} />
  32.           </Routes>
  33.         </div>
  34.       </BrowserRouter>
  35.     </div>

我尝试检查路径是否发生了变化之类的情况，但情况并非如此。这些图像具有绝对路径，因此我也不明白发生这种情况的原因。

英文:

So basically, I have a search bar component where upon submitting the form, I use useNavigate to redirect the page to the path /search/:name. The issue is that when I arrive on this page, the images that work fine on other paths get messed up here. also, if I reload the page, the CSS reset is lost as well.

handleSubmit:

  1.   const navigate = useNavigate();
  2.   function handleSubmit(event) {
  3.     event.preventDefault();
  5.     navigate(`search/${value}`);
  6.   }

App:

  1. &lt;div className={styles.app}&gt;
  2.       &lt;BrowserRouter&gt;
  3.         {/* Menu e Search deve permanecer em todas as rotas */}
  4.         &lt;Menu /&gt;
  5.         &lt;Search /&gt;
  6.         &lt;div className={styles.appMain}&gt;
  7.           &lt;Routes&gt;
  8.             &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
  9.             &lt;Route
  10.               path=&quot;/movies&quot;
  11.               element={
  12.                 &lt;Catalogue
  13.                   content={content.movies}
  14.                   catalogueApi={content.movies.catalogueApi}
  15.                   slideApi={content.movies.slideApi}
  16.                 /&gt;
  17.               }
  18.             /&gt;
  19.             &lt;Route
  20.               path=&quot;/tv&quot;
  21.               element={
  22.                 &lt;Catalogue
  23.                   content={content.tv}
  24.                   catalogueApi={content.tv.catalogueApi}
  25.                   slideApi={content.tv.slideApi}
  26.                 /&gt;
  27.               }
  28.             /&gt;
  29.             &lt;Route path=&quot;/bookmark&quot; element={&lt;Bookmark /&gt;} /&gt;
  30.             &lt;Route path=&quot;/search/:nome&quot; element={&lt;SearchResults /&gt;} /&gt;
  31.             &lt;Route path=&quot;*&quot; element={&lt;NotFound /&gt;} /&gt;
  32.           &lt;/Routes&gt;
  33.         &lt;/div&gt;
  34.       &lt;/BrowserRouter&gt;
  35.     &lt;/div&gt;

I tried to check if the path is changing or something like that, but that's not the case. The images have an absolute path, so I also don't see a reason for this to be happening

答案1

得分: 4

我看到的唯一问题是 navigate 函数的目标路径应该是绝对路径，而不是相对路径，例如 &quot;/search/:nome&quot; 而不是 &quot;search/:nome&quot;，这样 UI 就不会附加到当前路径的末尾。

示例：

  1. function handleSubmit(event) {
  2.   event.preventDefault();
  4.   navigate(`/search/${value}`);
  5. }
英文:

The only issue I see is that the target path for the navigate function should be an absolute path instead of a relative path, e.g. &quot;/search/:nome&quot; instead of &quot;search/:nome&quot;, so the UI isn't appending to the end of the current path.

Example:

  1. function handleSubmit(event) {
  2.   event.preventDefault();
  4.   navigate(`/search/${value}`);
  5. }

huangapple
  • 本文由 发表于 2023年8月5日 07:29:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76839594.html
  • javascript
  • react-router-dom
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定