2

我已经创建了一个 create-react-app 项目，现在我刚刚开始使用reach-router 向它添加路由。我有一个带有背景图像的简单 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>
  )
}
4

1 回答 1

0

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

另外，不要忘记将您的图像放在公共文件夹下。

background-image: url(/dark-paths.png);
于 2021-08-11T01:43:45.533 回答