CODEWITHSUNDEEP
reactjsreact-routerreact-router-domreact-router-v4
Hammad Hassan
Hammad Hassan

Reputation: 622

How to disable particular route when other one is active in react router

I have two components sports and entertainment. I want that when my sports route is active then user should not have its access to entertainment route. How can i do this??

routing code from my App.js file

<Router>
  <Switch>
    <Route path="/" exact>
      <Redirect to="/home" />
    </Route>
    <Route path="/home" component={Main} />
    <Route path="/sports" component={Sports} />
    <Route path="/entertainment" component={Entertainment} />
   
  </Switch>
</Router>

Upvotes: 0

Views: 5618

Answers (1)

macabeus
macabeus

Reputation: 4592

You could split into two sections.

Just for example:

const Routers = () => {
  const toggleRoutesPermission = true // should get the permission value from somewhere

  return (
    <Router>
      <Switch>
        <Route path="/" exact>
          <Redirect to="/home" />
        </Route>
        <Route path="/home" component={Main} />
        {
          toggleRoutesPermission
            ? <Route path="/sports" component={Sports} />
            : <Route path="/entertainment" component={Entertainment} />
        }
      </Switch>
    </Router>
  )
}

Upvotes: 2

Related Questions