иногда не правильно отображается фоновое изображение на роутере - PullRequest
Новая
       70

иногда не правильно отображается фоновое изображение на роутере

1 голос
/ 29 апреля 2020

Я создал проект create-реагировать на приложение и сейчас только начинаю добавлять к нему маршрутизацию с помощью reach-router. У меня есть простой компонент TitleHeader с фоновым изображением, которое я использую с компонентами для каждого из маршрутов. Они в основном работают, но всякий раз, когда я перехожу к одному из них (DissectionGame), фоновое изображение не появляется, а затем после этого оно также не появляется ни для одного из других компонентов.

Ниже приведены релевантные фрагменты, хотя они действительно не показывают проблему. На этом уровне все компоненты в действительности одинаковы, и, если я закомментирую другие вложенные компоненты в компоненте DissectionGame, он также будет работать. Учитывая это, я предполагаю, что проблема как-то связана с этими компонентами, но я просто понятия не имею, что посмотреть и что может повлиять на фоновое изображение в компоненте TitleHeader.

Кто-нибудь знает, что может происходить? Может ли путь к изображению как-то растоптаться и если да, то как? Я работаю в React всего пару месяцев, так что это все еще довольно свободно sh. Буду признателен за любые предложения! 

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>
  )
}
...