CODEWITHSUNDEEP
reactjsreact-router
Eniss
Eniss

Reputation: 913

Multiple BrowserRouter Shows Multiple Components

I wanted to use basename to separate components. I also have global urls so I ended up using 3 BrowserRouters. This causes showing multiple contents. If I go /fruit/search, it shows both content of Homepage component and FruitSearch component. How exactly can I use multiple BrowserRouters?

class App extends Component {
    render() {
        return (
            <div>
                <Header/>
                <BrowserRouter basename='/vegetable'>
                    <Switch>
                        <Route exact path='/search' component={VegetableSearch}/>
                        <Route exact path='/contact/:sellerId' component={ContactSeller}/>
                    </Switch>
                </BrowserRouter>
                <BrowserRouter basename='/fruit'>
                    <Switch>
                        <Route exact path='/search' component={FruitSearch}/>
                        <Route exact path='/contact/:sellerId' component={ContactSeller}/>
                    </Switch>
                </BrowserRouter>
                <BrowserRouter>
                    <div>
                        <Route path='/login' component={Login}/>
                        <Route path='/register' component={Registration}/>
                        <Route path='/about' component={AboutUs}/>
                        <Route path='/faq' component={Faq}/>
                        <Route path='/' component={Homepage}/>
                    </div>
                </BrowserRouter>
                <Footer/>
            </div>
        );
    }
}

export default App;

Upvotes: 3

Views: 2119

Answers (1)

Ravi Garg
Ravi Garg

Reputation: 1534

The solution is simple. The HomePage is rendering because your path matches both /as well as /fruit/search. To avoid this thing, use exact as it would render the component only when exact paths would match. So the updated code would be

<BrowserRouter>
  <div>
    <Route exact path="/login" component={Login} />
    <Route exact path="/register" component={Registration} />
    <Route exact path="/about" component={AboutUs} />
    <Route exact path="/faq" component={Faq} />
    <Route exact path="/" component={Homepage} />
  </div>
</BrowserRouter>

Upvotes: 1

Related Questions