reactjs - How can you route to a different BrowserRouter component in React Router 4?

I have a single page app with a 'landing page' which has its own BrowserRouter. The links on the 'landing page' route to the actual app which contains a navigation bar. The NavBar is contained inside of a separate BrowserRouter and renders to a div on the same page. I want to be able to press an image inside the navigation bar to completely reroute to the landing page. I understand in earlier versions of React, this could be done with redirect or pushing the path to the stack. However, this does not seem to work in React v4. When running the following code:

  


    

      
 
         (
                            src= {logo} height = "20"
                onClick={() => { this.props.history.push('/') }}
            />
        )} />
      
      
Page 1

      
Page 2
      
Page 3
    

    

      
      
      
    
  

I'm getting TypeError: Cannot read property 'history' of undefined. I've tried other methods like from inside the NavBar but all of my attempts have come with other problems such as the desired link only rendering inside the child div rather than redirecting the entire page to it.

Any help is greatly appreciated.

Answer

You don't have to wrap the whole component in BrowserRouter, just the routes. Then using the Link tag will solve the problem.

   


    

     

     
Page 1
     
Page 2
     
Page 3