英文:
react-router-dom's useNavigate() is causing my file paths to get lost
问题
所以基本上，我有一个搜索栏组件，当提交表单时，我使用useNavigate将页面重定向到路径/search/:name。问题是，当我到达这个页面时，其他路径上正常工作的图像在这里出现问题。而且，如果我重新加载页面，CSS 重置也会丢失。
handleSubmit:
const navigate = useNavigate();
function handleSubmit(event) {
event.preventDefault();
navigate(`search/${value}`);
}
App:
<div className={styles.app}>
<BrowserRouter>
{/* Menu e Search deve permanecer em todas as rotas */}
<Menu />
<Search />
<div className={styles.appMain}>
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/movies"
element={
<Catalogue
content={content.movies}
catalogueApi={content.movies.catalogueApi}
slideApi={content.movies.slideApi}
/>
}
/>
<Route
path="/tv"
element={
<Catalogue
content={content.tv}
catalogueApi={content.tv.catalogueApi}
slideApi={content.tv.slideApi}
/>
}
/>
<Route path="/bookmark" element={<Bookmark />} />
<Route path="/search/:nome" element={<SearchResults />} />
<Route path="*" element={<NotFound />} />
</Routes>
</div>
</BrowserRouter>
</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:
const navigate = useNavigate();
function handleSubmit(event) {
event.preventDefault();
navigate(`search/${value}`);
}
App:
<div className={styles.app}>
<BrowserRouter>
{/* Menu e Search deve permanecer em todas as rotas */}
<Menu />
<Search />
<div className={styles.appMain}>
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/movies"
element={
<Catalogue
content={content.movies}
catalogueApi={content.movies.catalogueApi}
slideApi={content.movies.slideApi}
/>
}
/>
<Route
path="/tv"
element={
<Catalogue
content={content.tv}
catalogueApi={content.tv.catalogueApi}
slideApi={content.tv.slideApi}
/>
}
/>
<Route path="/bookmark" element={<Bookmark />} />
<Route path="/search/:nome" element={<SearchResults />} />
<Route path="*" element={<NotFound />} />
</Routes>
</div>
</BrowserRouter>
</div>
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 函数的目标路径应该是绝对路径，而不是相对路径，例如 "/search/:nome" 而不是 "search/:nome"，这样 UI 就不会附加到当前路径的末尾。
示例：
function handleSubmit(event) {
event.preventDefault();
navigate(`/search/${value}`);
}
英文:
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. "/search/:nome" instead of "search/:nome", so the UI isn't appending to the end of the current path.
Example:
function handleSubmit(event) {
event.preventDefault();
navigate(`/search/${value}`);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论