react router one path point on two component

Question

In ReactJS , I have this routes:

<Route exact path="/" component={Home}/>
<Route path="/:id" component={Profile}/>
<Route path="/settings" component={Settings}/>

when I request

www.example.com/username

I get the Profile component as expected, but the problem is when I request

www.example.com/settings

the page render two components at the same time first I get the Profile component and below it, I get Settings component

how can I handle this case in React JS?

@HardikModha the same thing, if I changed the order then the order of the components in the same page will be changed, I mean now I get Settings component at first then Profile component — Hasan Mhd Amin, Aug 20 '18 at 09:24
the correct answer is here [link](https://stackoverflow.com/a/43994560/2609219) I need to add `` tag to avoid rendering multiple routes — Hasan Mhd Amin, Aug 20 '18 at 09:32

score 2 · Answer 1 · answered Aug 20 '18 at 09:26

2

Since both location path are same, you need to use exact, so you may use like this:

<Route exact path="/" component={Home}/>
<Route exact path="/settings" component={Settings}/>
<Route path="/:id" component={Profile}/>

But why not use profile path like this?

<Route path="/profile/:id" component={Profile}/>

A much better experience.

answered Aug 20 '18 at 09:26

Bhojendra Rauniyar

73,156
29
131
187

this doesn't work with me, I wrote the answer in the post – Hasan Mhd Amin Aug 20 '18 at 09:41

Hasan Mhd Amin · Accepted Answer · 2018-08-20T10:13:44.993

0

add <Switch> tag to avoid rendering multiple routes

import {BrowserRouter, Route, Switch} from "react-router-dom";
<BrowserRouter>
       <div className="sans-serif">
          <Switch>
             <Route exact path="/" component={Home}/>
             <Route path="/settings" component={Settings}/>
             <Route path="/:id" component={Profile}/>
          </Switch>
        </div>
</BrowserRouter>

edited Aug 20 '18 at 10:13

answered Aug 20 '18 at 09:55

Hasan Mhd Amin

55
7

react router one path point on two component

2 Answers2