0

I want to open an external link inside my react app under my navbar. I am using react router to navigate between pages. This is my code, I want when the user navigate to "/WebSite" it opens the website url under my navbar. Any help please ! 

 const App = ()=>{
  return(
    <BrowserRouter>
    <div>
      <NavBar/>
      <Route path="/Home" render={()=> <Home/>}/>
      <Route path='/SearchMagazine' render={()=> <SearchMagazine />}/>
      <Route path='/WebSite' component={() => <WebSite/>}/>
      <Route path="/Connection" render={()=> <Connection/>}/>
      <Route path="/FacebookPage" render={()=> <FacebookPage/>}/>
    </div>
    </BrowserRouter>
  )
 }
hamza mansour
  • 49
  • 7

1 Answers1

-1

You Can Use: 

<Route path='/WebSite' component={() => { window.location.replace('Any External Url'); return null;} }/>

Works both on React Router 3 and 4.

Malkhazi Dartsmelidze
  • 4,783
  • 4
  • 16
  • 40
  • 1
    That doesn't fulfil the requirement in the question: "it opens the website url **under my navbar**" – Quentin Mar 21 '19 at 13:22
  • Re edit: That just breaks the Back button. It doesn't fix the problem I pointed out in my previous comment. – Quentin Mar 21 '19 at 13:26