Programmatically navigate using React router

Question

With the help of the react-router I am able to use the element with the link to create more links which are then handled by the route reactor. I have noticed that it calls this.context.transitionTo(...). internally. For me to do a navigation not with the help of a link but with the help of a dropdown selection, how could I use code to do so? What does this.context mean? I have noticed the Navigation mixin but in order to do this without the help of mixins, what can I do?

Soham · Answer 1 · Feb 8, 2022

To answer your question, you should try the React Router v5.1.0 with hooks. An update for a new useHistory hook has been introduced in the React Router >5.1.0 if what you are using is React>16.8.0 along with the components that are functional, then please use the given lines of code:-

import { useHistory } from "react-router-dom"; 

function HomeButton() { 
const history = useHistory(); 

function handleClick() { 
history.push("/home");

} 

return ( 
<button type="button" onClick={handleClick}> 
Go home 
</button>
); 
}

When coming to the use of the React Router v4, there are about three various approaches which can be implemented into your routine of programming within components such as using the withRouter higher order, using the composition and rendering a <Route> and finally to use the context. The React Router is nothing but a wrapper which is around the history library in which the history handles the interaction with the internet's window.history using the hash histories. Over this, it also provides the storage history which helps environments with an absence of global history. For testing units with Node and react-native which is used for mobile application development are areas where this is beneficial. Push and Replace are the methods for navigation of a history instance. If the history of the visited locations array is taken into consideration, then the array will have a new location added with the help of push and replace will replace the current location in the array with a new one. Normally, while navigation, the push button will be used. The <BrowserRouter>, <HashRouter>, and <MemoryRouter> components will make a browser, hash and storage instances for you in React Router v4. The router also makes methods of the history instance which is related to the router available which you are using under the router object. In other words, by using the withRouter higher-order component, it will inject the history object as a part of the component which enables access to you and the push and replace methods without having to deal with the context. Refer below for the example:-

import { withRouter } from 'react-router-dom' 
// this also works with react-router-native 

const Button = withRouter(({ history }) => ( 
<button
type='button' 
onClick={() =
> { history.push('/new-location') }} > 

Click Me! 
</button> 
)
)

Another method used is to use the composition and render a <Route> as the <Route> component is not only for the purpose of simply matching locations. You can also render a route without a path and it will always match the current location. The <Route> component passes the same props as withRouter, so you will be able to access the history methods through the history prop using the following code:-

import { Route } from 'react-router-dom' 

const Button = () => ( 
  <Route render={({ history}) => ( 
  <button 
    type='button' 
    onClick={() = > { history.push('/new-location') }} 
> 
Click Me! 
</button> 

) } /> 

)

Finally, using the context* model as the React’s Context API is more stable as compared to v16 as displayed below:-

const Button = (props, context) => ( 
    <button 
      type='button' 
      onClick={() => {
  // context.history.push === history.push 
  context.history.push('/new-location') 
}} 
> 
Click Me! 
</button>
) 

  // you need to specify the context type so that it 
  // is available within the component 

Button.contextTypes = { 
history: React.PropTypes.shape({ 
push: React.PropTypes.func.isRequired 
})

}