Question

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

我正在尝试做到这一点，如果用户将数据输入到上传页面上的表单中，它将在列表中创建一个新视频并将其发布到现有数据中，并显示在主页上。此刻，我的路径都在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;

现在，我想这样做，以便上载页面可以访问与我的其余组件相同的信息，并通过提交处理程序函数传递，因此我认为我可以将Upload路径移至我的主要组件：< / p>

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> 
             
     </>
   );

我还链接了正确的网址路径：

<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>

但是，当尝试导航到上载页面时，没有任何显示...我也尝试在新的路径周围插入标签，但似乎没有任何效果。有什么想法吗？？

页面上未呈现路由组件

0 个答案: