英文:
React , "product/:id" page causes components assets to load from incorrect path(wrong path)
问题
I'm creating a Product landing page (single product page) with React, but when loading the navbar component, it causes the component's assets to load from the wrong path. For example, the product page path is (/product/:id), but the navbar component will go to (/product/:id/assist name) to get the assist, which will not load the assist because that is not the right path for the assets. The assets exist in the (./assist name).
app.js file
function App() {
return (
<Router>
<Container>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products/:id" element={<SingleProductPage />} />
</Routes>
</Container>
</Router>
);
}
Single product page that has the (/product/:id) path
function SingleProductPage() {
return (
<div id="single-Container">
<Navbar/>
single page
</div>
);
}
The navbar component
<div id="Navbar-SearchIcon">
<img src="../searchIcon.png" alt="" />
</div>
<div id="Navbar-BasketButton">
<img src="./basket-icon.png" alt="" />
</div>
When I'm on (/) path or any other path
When I'm on (/product/:id) path
How the navbar should look like
How the navbar looks like on the product/:id page
英文:
im creating a Product linding page (single product page) with react but when loading the navbar component
it couses the componint's assists to load from wrong path for examble product page path is (/product/:id)
the navbar component will go (/product/:id/assist name ) to get the assist witch will not load the assist
because that is not the right path for the asities.
the exists on the (./assist name )
app.js file
function App() {
return (
<Router>
<Container>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products/:id" element= {<SingleProductPage/>} />
</Routes>
</Container>
</Router>
);
}
single product page
that has's the (/product/:id) path
function SingleProductPage() {
return (
<div id="single-Container">
<Navbar/>
single page
</div>
)
}
the navbar component
<div id="Navbar-SearchIcon" >
<img src="../searchIcon.png" alt="" />
<div id="Navbar-BasketButton" >
<img src="./basket-icon.png" alt="" />
</div>
when im on (/) path or any other path
when im on (/product/:id) path
答案1
得分: 0
图片资源使用相对路径而不是PUBLIC目录中的绝对路径。当您进入子路由时，使用相对路径时，资源的路径将与当前URL路径不同。
绝对路径将以"/"开头，这是公共目录。这里是一个示例：
<div id="Navbar-SearchIcon" >
<img src="/images/searchIcon.png" alt="" />
</div>
<div id="Navbar-BasketButton" >
<img src="/images/basket-icon.png" alt="" />
</div>
/public
-/images
-searchIcon.png
-basket-icon.png
....
....
/src
....
英文:
The image sources are using relative paths instead of absolute paths in the PUBLIC directory. When you navigate into a sub-route the path to assets will be different when using relative paths, they will be relative from the current URL pathname.
Absolute paths will start with "/" which is the public directory. Here's an Example:
<div id="Navbar-SearchIcon" >
<img src="/images/searchIcon.png" alt="" />
</div>
<div id="Navbar-BasketButton" >
<img src="/images/basket-icon.png" alt="" />
</div>
/public
-/images
-searchIcon.png
-basket-icon.png
....
....
/src
....
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论