React Router - 在页面上刷新我来自父母的图像消失了答案

【问题标题】：React Router - on page refresh my images from parents disappearReact Router - 在页面上刷新我来自父母的图像消失了
【发布时间】：2023-04-06 04:55:01
【问题描述】：

我有一个问题，在刷新时，一些媒体会消失（背景图片 + 徽标）。背景图片继承自 HTML，logo 继承自 Navbar 组件。

此链接属于一个类别，在刷新时工作正常。

https://alphamedical.netlify.app/ATI

如果您单击该类别中的项目，然后刷新，则 bg 和徽标会消失。 https://alphamedical.netlify.app/ATI/HAMILTON-C1

例如上面的链接。

我认为这可能与react router有关。

我的应用路线

function App() {
const customHistory = createBrowserHistory();
return (
<Router history={customHistory}>
               <div>
                    <Navbar />
                    <Routes>
                         <Route path="/" exact element={<Home />} />
                         <Route path="/:title" element={<ProductList />} />
                         <Route path="/:title/:product" element={<ProductPage />} />
                    </Routes>
               </div>
          </Router>
     );
}

背景图片所在的HTML代码：

     </head>
     <style>
          html {
               scroll-behavior: smooth;
               overflow: scroll;
               overflow-x: hidden;
               background: url(images/gradient.jpg) no-repeat center center fixed;
               -webkit-background-size: cover;
               -moz-background-size: cover;
               -o-background-size: cover;
               background-size: cover;
          }
     </style>
     <body class="text-white" style="font-family: 'Inter', sans-serif; font-weight: 500">
          <div id="root"></div>
     </body>
</html>

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

确保在路由时您的媒体路径始终匹配。

【讨论】：

【解决方案2】：

对于https://alphamedical.netlify.app/ATI，样式可以正确找到背景图片路径。但是对于https://alphamedical.netlify.app/ATI/HAMILTON-C1，背景图片路径是错误的。它需要

background: URL(../images/gradient.jpg) no-repeat center center fixed;

而不是

background: url(images/gradient.jpg) no-repeat center center fixed;

解决方案： 创建一个样式表文件。并将其导入您的 App.jsx 文件中

【讨论】：

如果它不起作用，请告诉我。
好吧，我将代码移动到 CSS 文件中并导入到 App 中，但导航栏组件的徽标在刷新时仍然消失。我该如何解决？
好吧，根据您的回答，我发现将图像上传到托管网站上，然后将链接粘贴为 SRC 而不是文件中的路径，但我不确定是否可以最佳实践。