Reactjs 已路由组件未在页面上呈现

我正在尝试为我的web开发训练营的作业构建一个类似Youtube的React应用程序。 该应用程序有两个“页面”——主视频页面显示英雄视频和其他视频的侧面部分，另一个组件链接到上传页面。我已经为我的视频信息做了一个后端

我正在尝试这样做，如果用户在上传页面的表单中输入数据，这将在列表中创建一个新的视频，并将其发布到现有数据，并在主页上显示。目前，我的路径都在App.js中，如下所示：

function App() {

    return (
      <div className="App">       
      <Switch>
          <Route path='/' exact component={MainVideoPage} />
          <Route path='/videos/:id' component={MainVideoPage} />
          <Route path='/upload' component={Upload} />
      </Switch>
      </div>
    );
};

export default App;

函数应用程序（）{
返回(
);
};
导出默认应用程序；

现在我想让uploads页面能够访问与我的其他组件相同的信息，通过submit handler函数传递，因此我想我可以将上传路径移动到我的主组件：

return (
     <>
     <Route exact path="/upload" render={() => <Upload/>} />
       <Header />           
       <HeroVideo heroVideoDetails={this.state.heroVideoDetails} />
       <div className="section-container">
           <section className="main-section">
               <HeroVideoDetails heroVideoDetails={this.state.heroVideoDetails} />
               <CommentsSection commentsList={this.state.heroVideoDetails} />
           </section>
             <NextVideoQueue heroVideoDetails={this.state.heroVideoDetails} nextVideoList={this.state.nextVideoList} />
       </div> 
             
     </>
   );

返回(
} />
);

我还链接到了正确的url路径：

<Link to="/upload" className="header__upload">
    <button type="button" className="button header__upload-button"><img src={UploadIcon} alt="Upload Icon" className="header__upload-button-icon"/> UPLOAD</button>
</Link>

上传

但是，当尝试导航到上载页面时，不会呈现任何内容。。。我也尝试过在新路径周围插入标签，但似乎没有任何效果。有什么想法吗