React Router 路径渲染多个组件

Question

我定义了以下路线：

   <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/> 组件都呈现。我已经尝试了所有可能的删除和添加 exact 道具的方法。比如一次只给一个人，然后把它从所有人身上拿走。没有任何作用。我如何避免 <VideoState/> 组件为上面提到的第二条路径呈现。

Answer 1

您可以使用另一个组件并渲染条件库

const AnotheCompoent = (props) => <div>
{ props.match.params.type == 'collaborators' ?

<Collaborators {...props}/> : 

<VideoStats  {...props}/> }
</div>;



<Route exact path="/dashboard/channels/:id/:channelName/:type" render={(props) => <AnotheCompoent {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />

Answer 2

加一个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}/>} />

https://reacttraining.com/react-router/core/api/Switch

React Router 路径渲染多个组件

React Router path renders multiple component

javascript

reactjs

react-router-v4