React Router path renders multiple component [duplicate]

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.

Put those inside a Switch

Agney
– Agney

2018-03-20 05:50:32 +00:00
Commented Mar 20, 2018 at 5:50 — Agney
– Agney, Commented Mar 20, 2018 at 5:50
will it matter if i swap 2nd line with 3rd line ?

Sushmit Sagar
– Sushmit Sagar

2018-03-20 05:55:46 +00:00
Commented Mar 20, 2018 at 5:55 — Sushmit Sagar
– Sushmit Sagar, Commented Mar 20, 2018 at 5:55

Agney · Accepted Answer · 2018-03-20 05:56:37Z

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

Birbal Singh · Accepted Answer · 2018-03-20 05:49:11Z

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

collaborator is not supposed to be a :type param. it is hardcoded so that it is completely different path.
when you call with localhost:3000/dashboard/channels/5ab09ca6d224c413423c2819/abc/… then you can check

Collectives™ on Stack Overflow

React Router path renders multiple component [duplicate]

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related