我定义了以下路线:
<Route exact path="/dashboard/main" render={() => <Dashboard toggleModal={this.toggleModal} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu} />} />
<Route exact path="/dashboard/channels/:id/:channelName/collaborators" render={(props) => <Collaborators {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route exact path="/dashboard/channels/:id/:channelName/:type" render={(props) => <VideoStats {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/edit_video" render={(props) => <EditVideo {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/account" render={(props) => <Account {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/> } />
<Route path="/dashboard/socialMedia" render={(props) => <SocialMedia {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/media-library" render={(props) => <MediaLibrary {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/shares" render={(props) => <Shares {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
我正在第二和第三条路线。现在,如果path是:http://localhost:3000/dashboard/channels/5ab09ca6d224c413423c2819/abc/LIVE_WEB
<VideoState/>
组件渲染
但是,如果路径是:
http://localhost:3000/dashboard/channels/5ab09ca6d224c413423c2819/abc/collaborators
然后Both<Collaborators/>
和<VideoState/>
component渲染。我已经尝试了删除和添加确切道具的所有可能方法。喜欢一次只给一个,然后从所有人中删除它。什么都行不通。我如何避免<VideoState/>
上述第二条路径的组件渲染。
添加一个Switch
。它将呈现与path
唯一匹配的第一条路线。
<Route exact path="/dashboard/main" render={() => <Dashboard toggleModal={this.toggleModal} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu} />} />
<Switch>
<Route path="/dashboard/channels/:id/:channelName/collaborators" render={(props) => <Collaborators {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/channels/:id/:channelName/:type" render={(props) => <VideoStats {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
</Switch>
<Route path="/dashboard/edit_video" render={(props) => <EditVideo {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/account" render={(props) => <Account {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/> } />
<Route path="/dashboard/socialMedia" render={(props) => <SocialMedia {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/media-library" render={(props) => <MediaLibrary {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/shares" render={(props) => <Shares {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句