0

i just want to restrict users to some page.and when user login on welcome and the data is saved in the cookies then after only he can access restricted page. and some pages he has no restriction he can access without restriction..

i have implemented it but if you have better solution to this . i would love to have that.

function App() { 

  const cookies = new Cookies();
  
  return (
     <div className="grid-container">
      {!cookies.get('zip') && url!=="contact" && url!=="forgotpassword" && url!=="registration" && 
            <Welcome/>
      }
      {
      !cookies.get('zip') && ( url==="contact" || url==="forgotpassword" || url==="registration" )  &&                                    <header>
        <Header/>
 </header>}

      {!cookies.get('zip') && (url==="contact" || url==="forgotpassword" || url==="registration")                     &&   <main>
        
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={HelpDocuments}/>
            <Route  path="/registration" component={Registration}/>
            <Route  path="/contact" component={Contact}/>
            <Route  path="/forgotpassword" component={ForgotPassword}/>
            <Route  path="/market" component={Market}/>
            <Route  path="/marketdropdown" component={MarketDropDown}/>
            <Route  path="/mylocation" component={MyLocation}/>
            
            <Route  path="/productandservice" component={ProductAndService}/>
          </Switch>
          
        </BrowserRouter>
      </main>
}
     {!cookies.get('zip') &&( url==="contact" || url==="forgotpassword" || url==="registration" ) && <footer>
          <Footer/>
            
      </footer>
}


       {cookies.get('zip')   && <header>
        <Header/>
      </header>}

      {cookies.get('zip')  &&<main>
        
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={HelpDocuments}/>
            <Route  path="/registration" component={Registration}/>
            <Route  path="/contact" component={Contact}/>
            <Route  path="/forgotpassword" component={ForgotPassword}/>
            <Route  path="/market" component={Market}/>
            <Route  path="/marketdropdown" component={MarketDropDown}/>
            <Route  path="/mylocation" component={MyLocation}/>
            <Route  path="/productandservice" component={ProductAndService}/>
          </Switch>
          
        </BrowserRouter>
      </main>
}
     {cookies.get('zip')  && <footer>
          <Footer/>
            
      </footer>
}

    </div>
   
    
  );
  }


export default App;

pls help me and by provide better solution to this...it is lengthy it would take time but it will be good

Dheeraj
  • 119
  • 2
  • 9
  • 1
    If your question is : `How to redirect to a React Component outside browser router in react?` I would say move that component inside the Router, assign it a route like `/not-allowed`, now you can easily redirect to `/not-allowed` route. Won't it work? If you are looking for Authentication, see https://reactrouter.com/web/example/auth-workflow – Ajeet Shah Mar 23 '21 at 16:20
  • will you please elaborate with short code snipper @AjeetShah – Dheeraj Mar 23 '21 at 16:47
  • I recently wrote an answer on [Authenticated Routes](https://stackoverflow.com/a/66783231/2873538). Let me know if that helps or not. – Ajeet Shah Mar 24 '21 at 21:20

0 Answers0