reach路由器背景图像有时显示不正确

Question

我已经创建了一个create-react应用程序项目，现在我刚刚开始使用reach路由器为其添加路由。我有一个简单的TitleHeader组件，它带有一个背景图像，我将其用于每条路线的组件。它们大多有效，但每当我导航到一个特定的组件(DissectionGame(时，背景图像就不会出现，然后，它也不会出现在任何其他组件中。

以下是相关的片段，尽管它们确实没有显示问题。在这个级别上，所有的组件都是相同的，如果我注释掉DissectionGame组件中的其他嵌套组件，它也可以工作。考虑到这一点，我认为问题与这些组件有关，但我不知道该看什么，也不知道什么可能会影响TitleHeader组件中的背景图像。

有人知道可能发生的事情吗？通往图像的道路会以某种方式被践踏吗？如果是，如何？我在React工作才几个月，所以一切都还很新鲜。如果有任何建议，我将不胜感激！

function App() {
return (
<AppStyle>
<HeaderNav />
<Router>
<Home path="/" />
<Help path="help" />
<Games path="games" >
<GamesInfo path="/" />
<DissectionGame path="dissection" />
</Games>
</Router>
</AppStyle>
);
}
const HeaderBlock = styled.div`  
background-image: url(./dark-paths.png);
background-size: auto;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 24px;
color: #c2d5db;
padding: 15px 0px;
margin: 5px 0px 10px;
`;
const TitleHeader = ({title}) => {
return (
<HeaderBlock>
{title}
</HeaderBlock>
)
}
const Home = () => {
return (
<React.Fragment>
<TitleHeader title="Welcome to Leading Step!" />
</React.Fragment>
)
}
const DissectionGame = () => {
return (
<React.Fragment>
<TitleHeader title="Sentence Dissection" />
/* Other game components... */
</React.Fragment>
)
}

Answer 1

我建议您尝试删除URL中的.，以确保图像是从服务器的根目录加载的，而不是从当前路由的相对路径加载的。

另外，别忘了把你的图片放在公用文件夹下。

background-image: url(/dark-paths.png);