React Router path renders multiple component

Question

i have following routes defined:

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

i am working on second and third route. now if path is : http://localhost:3000/dashboard/channels/5ab09ca6d224c413423c2819/abc/LIVE_WEB <VideoState/> Component renders

But if path is:

http://localhost:3000/dashboard/channels/5ab09ca6d224c413423c2819/abc/collaborators

then Both <Collaborators/> and <VideoState/> component renders. i have tried all possible methods of removing and adding exact prop. like giving it to only one at a time and removing it from all of them. nothing works. How do i avoid <VideoState/> component to render for the second path mention above.

will it matter if i swap 2nd line with 3rd line ? – Sushmit Sagar Mar 20 '18 at 05:55 — Sushmit Sagar, Mar 20 '18 at 05:55

score 1 · Answer 1 · answered Mar 20 '18 at 05:49

1

You can get using another Component and render condition base

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

answered Mar 20 '18 at 05:49

Birbal Singh

954
6
16

collaborator is not supposed to be a :type param. it is hardcoded so that it is completely different path. – Sushmit Sagar Mar 20 '18 at 05:53
when you call with http://localhost:3000/dashboard/channels/5ab09ca6d224c413423c2819/abc/collaborators then you can check – Birbal Singh Mar 20 '18 at 05:55

score 1 · Accepted Answer · answered Mar 20 '18 at 05:56

Add a Switch. It will render the first route that matches the path only.

 <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

thanx it worked. Could you please explain what do you mean by "path only". i am new to react and react router and i am having so much difficulty understanding routing. — Sushmit Sagar, Mar 20 '18 at 06:04
The `path` attribute that you provide to the `Route`. In its normal behavior `Router` renders all Routes that have their path matching to the current URL. But when you use a `Switch`, it will render only the first `Route` with path matching the URL. — Agney, Mar 20 '18 at 06:06

React Router path renders multiple component

2 Answers2