How to Programmatically navigate using react router?

Question

With react-router I can use the Link element to create links that are natively handled by react router. I see internally it calls this.context.transitionTo(...). I want to do a navigation, but not from a link, from a dropdown selection for example. How can I do this in code? What is this.context? I saw the Navigation mixin, but can I do this without mixins?

Ednsquare · Accepted Answer

React Router v4 With v4 of React Router, there are three approaches that you can take to programmatic routing within components. Use the withRouter higher-order component. Use composition and render a React Router is mostly a wrapper around the history library. history handles interaction with the browser's window.history for you with its browser and hash histories. It also provides a memory history which is useful for environments that don't have a global history. This is particularly useful in mobile app development (react-native) and unit testing with Node. A history instance has two methods for navigating: push and replace. If you think of the history as an array of visited locations, push will add a new location to the array and replacewill replace the current location in the array with the new one. Typically you will want to use the push method when you are navigating. 1. Use the withRouter higher-order component The withRouter higher-order component will inject the history object as a prop of the component. This allows you to access the push and replace methods without having to deal with the context. import { withRouter } from 'react-router-dom' // this also works with react-router-native const Button = withRouter(({ history }) => ( )) 2. Use composition and render a The component isn't just for matching locations. You can render a pathless route and it will always match the current location. The component passes the same props as withRouter, so you will be able to access the history methods through the history prop. import { Route } from 'react-router-dom' const Button = () => ( ( )} /> )

React JS

Similar Questions

React JS - setState doesn't update the state immediately

How to push to History in React Router v4?

Unable to access React instance (this) inside event handler?

On a mission to build Next-Gen Community Platform for Developers

Facebook

Twitter

Linkedin

Instagram