CODEWITHSUNDEEP
reactjsreact-router
MattBlack
MattBlack

Reputation: 3828

React router, route all except Path

I have a react router switch, I need any paths except '/terms' to render the CompetitionContent component. And the /terms path to render the terms component.

The issue is that the url '/test' is correctly rendering the CompetitionContent component. But when I navigate to '/terms', both components are displayed instead of just the terms component.

Why would this be happening? It was my understanding the switch would exit after the first match?

function Competition(){

    return(
        <div class="container-fluid competition-container">
            <div class="col-12"><Banner/></div>
            <div class="col-12 competition-content">
            
        <Switch>
            <Route exact path="/terms" component={Terms}/>
            <Route path="/" component={CompetitionContent}/>
        </Switch>
       
            </div>
            <div class="col-12"><Footer/></div>
        </div>
    )
}
export default Competition

Upvotes: 1

Views: 1203

Answers (1)

Viet
Viet

Reputation: 12777

You need to add exact in <Route exact path="/" component={CompetitionContent}/>

After that, you need add more route to redirect all other route to /:

<Route path="*" component={() => <Redirect to="/" />}/>

Upvotes: 2

Related Questions