这个问题在这里已有答案:
我有以下路线定义:
<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}/>} />
我正在研究第二和第三条路线 . 现在,如果路径是: http://localhost:3000/dashboard/channels/5ab09ca6d224c413423c2819/abc/LIVE_WEB
<VideoState/>
组件渲染
但如果路径是:
http://localhost:3000/dashboard/channels/5ab09ca6d224c413423c2819/abc/collaborators
然后 <Collaborators/>
和 <VideoState/>
组件都会呈现 . 我已经尝试了所有可能的删除和添加精确道具的方法 . 比如一次只给它一个并将它从所有它中删除 . 什么都行不通我如何避免 <VideoState/>
组件为上面提到的第二条路径进行渲染 .
2 回答
添加
Switch
. 它将呈现仅与path
匹配的第一条路线 .https://reacttraining.com/react-router/core/api/Switch
您可以使用另一个Component并呈现条件库