Как визуализировать компонент на каждом маршруте с работающим функционалом? - PullRequest
Новая
       13

Как визуализировать компонент на каждом маршруте с работающим функционалом?

0 голосов
/ 26 апреля 2019

Я пытаюсь отобразить компонент, который воспроизводит mp3 на каждом маршруте, и он продолжает непрерывно воспроизводиться, несмотря на изменения маршрута.Я не уверен, возможно ли это, но я предполагаю, что это предполагает, что React создает одностраничные сайты.

До сих пор я только добрался до получения компонента для рендеринга, моя проблема всефункциональности вместе с компонентом схватился за работу ... Я не могу понять, почему .. 

 <HashRouter>
        <Route path="/" render={props => <Music />} />
        <Route exact path="/" component={Home} />
        <Route path="/work" component={MyWork} />
        <Route path="/about" component={About} />
  </HashRouter>

Рассматриваемый маршрут является первым.Я также попробовал это, думая, что мне нужно было передать реквизиты для того, чтобы функционал работал 

        <Route path="/" render={props => <Music
          changePlayingState={props.changePlayingState}
          playing={props.state.playing}
          showMusicMessage={props.showMusicMessage}
          hideMusicMessage={props.hideMusicMessage}/>} />

Рабочая версия компонента (и как я хотел бы, чтобы она отображалась на всех маршрутах)показанная на домашней странице (нажмите кнопку воспроизведения) песочница с кодом имела ограничение на размер файла, поэтому я просто добавил несколько звуковых эффектов (занимает секунду, чтобы начать воспроизведение)

https://codesandbox.io/s/rlw1q45m1m

Единственные компонентыотносительно этого вопроса (и единственного, что вам нужно просмотреть):

Index.js

Маршруты: Home.js, About.js, MyWork.js

Музыкальный компонент: Music.js

Если вам нужна дополнительная информация, пожалуйста, спросите!Спасибо!

1 Ответ

0 голосов
/ 26 апреля 2019

Вы просто должны извлечь музыкальный компонент и сделать его отдельным компонентом сам по себе, а затем передать его в HashRouter в пределах одного дочернего элемента и остальных Routes.

Вот пример для реализации NavBar на каждом маршруте приложения React.

...