当我导航我的应用程序时，flowplayer streamig停止

Question

flowplayer在反应中遇到问题。 我的播放器只有一个组件，如何在两个部分（家庭和网格）中显示，当应用在家庭中启动时，播放器运行良好，但是当我进入网格时，播放器停止...为什么？如果我在app.js中设置了所有配置，应该可以访问所有部分，对吗？

这是我的代码：

app.js（在我的索引上，我拥有所有的CDN）

import React, { Component} from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Header from './components/commons/Header/Header';
import Footer from './components/commons/Footer/Footer';
import Home from './Screens/Home';
import Grid from './Screens/Grid';
import {Helmet} from "react-helmet";

class App extends Component {
  constructor(props){
    super(props)
    this.state = {}
  }

 render() {

    return (
      <React.Fragment>
      <BrowserRouter>
        <div className='container-fluid'>

        <Header />

        {<Helmet>
             <link rel="stylesheet" href="//releases.flowplayer.org/7.0.2/commercial/skin/skin.css"></link> 
             <script type="text/javascript">{`


                     flowplayer.conf.hlsjs = {
                       maxBufferSize: 0,
                       maxBufferLength: 30,

                       liveSyncDuration: 30
                     }

                     flowplayer.conf.dnaConfig = {};

                     window.onload = function () {
                       flowplayer("#vast", {
                         ima: {
                           ads: [{
                             time: 0,
                             adTag: "url1"
                           },
                           {
                             time: 1800,
                             adTag: "url2"
                           }
                           ] 
                         },

                         key: "$000",
                         splash: true,
                         live: true,
                         share: false,
                         ratio: 5/12,

                         clip: {
                           sources: [
                             { type: "application/x-mpegurl",
                               src:   "urlvideo" }
                           ]
                         }
                       })

                     };
         `}
         </Helmet>}
         <Switch>
            <Route path="/"  exact render={(props) => <Home {...props}/>}/>
            <Route path="/grid" render={(props) => <Grid {...props} />
         </Switch>
        <Footer />
        </div>
        </BrowserRouter>

        </React.Fragment>
    )
  }
}

export default App;

home.js

import React from 'react'
import MainPlayer from '../components/main-player/Main-player';

export default class Home extends React.Component {
    constructor(props){
        super(props)
    }

    render(){
        return (
             <React.Fragment>
                <MainPlayer />
            </ React.Fragment> 
        )
    }
}

grid.js

import React from 'react'
import MainPlayer from '../components/main-player/Main-player';

export default class Grid extends React.Component {
    constructor(props){
        super(props)
    }

    render(){
        return (
             <React.Fragment>
                <MainPlayer />
            </ React.Fragment> 
        )
    }
}

Mainplayer.js

import React from 'react'
import './Main-player.scss';


export default class MainPlayer extends React.Component {
    constructor(props) {
        super(props);
   }


    render() {

        return (
            <React.Fragment>
                <div id="content">
                    <div id="vast" class="flowplayer"></div>
                </div>
            </React.Fragment>
        )
    }

}