Css 有时到达路由器背景图像未正确显示

我已经创建了一个createreact应用程序项目，现在我刚开始使用reach路由器将路由添加到该项目中。我有一个简单的标题标题器组件，带有一个背景图像，用于每个路线的组件。它们大部分都能工作，但每当我导航到一个特定的组件（解剖游戏）时，背景图像不会出现，然后，其他任何组件也不会出现背景图像

下面是相关的代码片段，尽管它们并没有显示问题所在。在这个级别上，所有组件实际上都是相同的，如果我注释掉了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>
  )
}

函数应用程序（）{
返回(
);
}
const HeaderBlock=styled.div`
背景图像：url（./dark path.png）；
背景尺寸：自动；
字体系列：“Roboto”，无衬线；
字体大小：400；
字体大小：24px；
颜色：#c2d5db；
填充：15px 0px；
保证金：5px0px 10px；
`;
常量标题标题=（{title}）=>{
返回(
{title}
)
}
常量Home=（）=>{
返回(
)
}
const DissectionGame=（）=>{
返回(
/*其他游戏组件*/
)
}