Programmatically navigate using react router V4

Question

I have just replaced react-router from v3 to v4  But I am not sure how to programmatically navigate in the member function of a Component  i e in handleClick   function I want to navigate to  path some where after processing some data  I used to do that by   import   browserHistory   from  react-router  browserHistory push   path some where     But I can t find such interfaces in v4  How can I navigate using v4

User · Answer

I struggled with this for a while - something so simple, yet so complicated, because ReactJS is just a completely different way of writing web applications, it's very alien to us older folk!

I created a separate component to abstract the mess away:

// LinkButton.js

import React from "react";
import PropTypes from "prop-types";
import {Route} from 'react-router-dom';

export default class LinkButton extends React.Component {

    render() {
        return (
            <Route render={({history}) => (
                <button {...this.props}
                       onClick={() => {
                           history.push(this.props.to)
                       }}>
                    {this.props.children}
                </button>
            )}/>
        );
    }
}

LinkButton.propTypes = {
    to: PropTypes.string.isRequired
};

Then add it to your render() method:

<LinkButton className="btn btn-primary" to="/location">
    Button Text
</LinkButton>

User · Answer

This works   import   withRouter   from  react-router-dom    const SomeComponent   withRouter    history      gt         lt div onClick       gt  history push   path some where    gt          some clickable element      lt  div gt         export default SomeComponent

User · Answer

TL DR   if  navigate      return  lt Redirect to     push  true    gt      The simple and declarative answer is that you need to use  lt Redirect to  URL  push  boolean    gt  in combination with setState       push  boolean - when true  redirecting will push a new entry onto the history instead of replacing the current one      import   Redirect   from  react-router   class FooBar extends React Component     state         navigate  false        render         const   navigate     this state         here is the important part     if  navigate          return  lt Redirect to     push  true    gt                                           return          lt div gt           lt button onClick       gt  this setState   navigate  true     gt            Home          lt  button gt         lt  div gt                Full example here  Read more here   PS  The example uses ES7  Property Initializers to initialise state  Look here as well  if you re interested

User · Answer

The easiest way to get it done   this props history push   new url    Note    You may want to pass the history prop from parent component down to the component you want to invoke the action if its not available

User · Answer

I ve been testing v4 for a few days now and    I m loving it so far  It just makes sense after a while   I also had the same question and I found handling it like the following worked best  and might even be how it is intended   It uses state  a ternary operator and  lt Redirect gt    In the constructor    this state         redirectTo  null    this clickhandler   this clickhandler bind this     In the render     render        return            lt div gt            this state redirectTo                lt Redirect to    pathname  this state redirectTo      gt                                 lt div gt                                  lt button onClick   this clickhandler     gt                                 lt  div gt                              In the clickhandler     this setState   redirectTo    path some where        Hope it helps  Let me know

User · Answer

this props history push   url     If you have not found this props history available in your component    then try this   import  withRouter  from  react-router-dom  export default withRouter MyComponent

User · Answer

As sometimes I prefer to switch routes by Application then by buttons  this is a minimal working example what works for me   import   Component   from  react  import   BrowserRouter as Router  Link   from  react-router-dom   class App extends Component     constructor props        super props            type BrowserRouter        this router   undefined        async handleSignFormSubmit         await magic       this router history push             render         return          lt Router ref   el   gt  this router   el   gt           lt Link to   signin  gt Sign in lt  Link gt           lt Route path   signin  exact  true  render       gt               lt SignPage onFormSubmit   this handleSignFormSubmit     gt               gt         lt  Router gt

User · Answer

My answer is similar to Alex s  I m not sure why React-Router made this so needlessly complicated  Why should I have to wrap my component with a HoC just to get access to what s essentially a global    Anyway  if you take a look at how they implemented  lt BrowserRouter gt   it s just a tiny wrapper around history   We can pull that history bit out so that we can import it from anywhere  The trick  however  is if you re doing server-side rendering and you try to import the history module  it won t work because it uses browser-only APIs  But that s OK because we usually only redirect in response to a click or some other client-side event  Thus it s probably OK to fake it      history js if   SERVER          module exports         else       module exports   require  history   createBrowserHistory        With the help of webpack  we can define some vars so we know what environment we re in   plugins        new DefinePlugin              SERVER      false              BROWSER      true      you really only need one of these  but I like to have both           And now you can  import history from    history     From anywhere  It ll just return an empty module on the server   If you don t want use these magic vars  you ll just have to require in the global object where it s needed  inside your event handler   import won t work because it only works at the top-level

User · Answer

I had a similar issue when migrating over to React-Router v4 so I ll try to explain my solution below   Please do not consider this answer as the right way to solve the problem  I imagine there s a good chance something better will arise as React Router v4 becomes more mature and leaves beta  It may even already exist and I just didn t discover it    For context  I had this problem because I occasionally use Redux-Saga to programmatically change the history object  say when a user successfully authenticates    In the React Router docs  take a look at the  lt Router gt  component and you can see you have the ability to pass your own history object via a prop  This is the essence of the solution - we supply the history object to React-Router from a global module   Steps    Install the history npm module - yarn add history or npm install history --save create a file called history js in your App js level folder  this was my preference      src history js  import createHistory from  history createBrowserHistory   export default createHistory      Add this history object to your Router component like so     src App js  import history from     your path to history js    lt Router history  history  gt     Route tags here  lt  Router gt   Adjust the URL just like before by importing your global history object    import history from     your path to history js   history push  new path here        Everything should stay synced up now  and you also have access to a way of setting the history object programmatically and not via a component container

User · Answer

I think that  rgommezz covers most of the cases minus one that I think it s quite important       history is already a dependency or React Router  but if don t have it then try npm install save-dev history  import createHistory from  history createBrowserHistory      in your function then call add the below  const history   createHistory       Use push  replace  and go to navigate around  history push   home      This allows me to write a simple service with actions calls that I can call to do the navigation from any component I want without doing a lot HoC on my components      It is not clear why nobody has provided this solution before  I hope it helps  and if you see any issue with it please let me know

User · Answer

You can navigate conditionally by this way import   useHistory   from  quot react-router-dom quot    function HomeButton       const history   useHistory       function handleClick         history push  quot  path some where quot           return        lt button type  quot button quot  onClick  handleClick  gt        Go home      lt  button gt

User · Answer

For those of you who require to redirect before fully initalizing a router using React Router or React Router Dom You can provide a redirect by simply accesing the history object and pushing a new state onto it within your constructur of app js   Consider the following   function getSubdomain hostname        let regexParse   new RegExp   a-z -0-9  2 63    a-z    2 5          let urlParts   regexParse exec hostname       return hostname replace urlParts 0       slice 0  -1      class App extends Component        constructor props            super props             this state                 hostState  true                     if  getSubdomain window location hostname  length  gt  0                this state hostState   false              window history pushState            login              else               console log getSubdomain window location hostname                           render             return                 lt BrowserRouter gt                   this state hostState                          lt div gt                           lt Route path   login  component  LoginContainer   gt                           lt Route path     component  PublicContainer   gt                       lt  div gt                                             lt div gt                           lt Route path   login  component  LoginContainer   gt                       lt  div gt                                                    lt  BrowserRouter gt               Here we want to change the output Routes dependant on a subdomain  by interacting with the history object before the component renders we can effectively redirect while still leaving our routes in tact   window history pushState            login

User · Answer

You can also simply use props to access history object  this props history push  new url

User · Answer

Use useHistory hook if you re using function components You can use useHistory hook to get history instance  import   useHistory   from  quot react-router-dom quot    const MyComponent        gt      const history   useHistory         return        lt button onClick       gt  history push  quot  about quot    gt        Click me      lt  button gt          The useHistory hook gives you access to the history instance that you may use to navigate  Use history property inside page components React Router injects some properties including history to page components  class HomePage extends React Component     render         const   history     this props       return          lt div gt           lt button onClick       gt  history push  quot  projects quot    gt            Projects          lt  button gt         lt  div gt                Wrap child components withRouter to inject router properties withRouter wrapper injects router properties to components  For example you can use this wrapper to inject router to logout button component placed inside user menu  import   withRouter   from  quot react-router quot    const LogoutButton   withRouter    history      gt      return        lt button onClick       gt  history push  quot  login quot    gt        Logout      lt  button gt            export default LogoutButton

User · Answer

If you are targeting browser environments  you need to use react-router-dom package  instead of react-router  They are following the same approach as React did  in order to separate the core   react  and the platform specific code   react-dom  react-native   with the subtle difference that you don t need to install two separate packages  so the environment packages contain everything you need  You can add it to your project as   yarn add react-router-dom  or  npm i react-router-dom  The first thing you need to do is to provide a  lt BrowserRouter gt  as the top most parent component in your application   lt BrowserRouter gt  uses the HTML5 history API and manages it for you  so you don t have to worry about instantiating it yourself and passing it down to the  lt BrowserRouter gt  component as a prop  as you needed to do in previous versions     In V4  for navigating programatically you need to access the history object  which is available through React context  as long as you have a  lt BrowserRouter gt  provider component as the top most parent in your application  The library exposes through context the router object  that itself contains history as a property  The history interface offers several navigation methods  such as push  replace and goBack  among others  You can check the whole list of properties and methods here   Important Note to Redux Mobx users If you are using redux or mobx as your state management library in your application  you may have come across issues with components that should be location-aware but are not re-rendered after triggering an URL update  That s happening because react-router passes location to components using the context model      Both connect and observer create components whose shouldComponentUpdate methods do a shallow comparison of their current props and their next props  Those components will only re-render when at least one prop has changed  This means that in order to ensure they update when the location changes  they will need to be given a prop that changes when the location changes    The 2 approaches for solving this are    Wrap your connected component in a pathless  lt Route   gt   The current location object is one of the props that a  lt Route gt  passes to the component it renders Wrap your connected component with the withRouter higher-order component  that in fact has the same effect and injects location as a prop     Setting that aside  there are four ways to navigate programatically  ordered by recommendation   1 - Using a  lt Route gt  Component It promotes a declarative style  Prior to v4   lt Route   gt  components were placed at the top of your component hierarchy  having to think of your routes structure beforehand  However  now you can have  lt Route gt  components anywhere in your tree  allowing you to have a finer control for conditionally rendering depending on the URL  Route injects match  location and history as props into your component  The navigation methods  such as push  replace  goBack     are available as properties of the history object   There are 3 ways to render something with a Route  by using either component  render or children props  but don t use more than one in the same Route  The choice depends on the use case  but basically the first two options will only render your component if the path matches the url location  whereas with children the component will be rendered whether the path matches the location or not  useful for adjusting the UI based on URL matching    If you want to customise your component rendering output  you need to wrap your component in a function and use the render option  in order to pass to your component any other props you desire  apart from match  location and history  An example to illustrate   import   BrowserRouter as Router   from  react-router-dom   const ButtonToNavigate      title  history      gt       lt button     type  button      onClick       gt  history push   my-new-location       gt       title     lt  button gt      const SomeComponent        gt       lt Route path     render   props    gt   lt ButtonToNavigate     props  title  Navigate elsewhere    gt     gt         const App        gt       lt Router gt       lt SomeComponent   gt     Notice how in v4 we can have any other component interleaved      lt AnotherComponent   gt     lt  Router gt       2 - Using withRouter HoC  This higher order component will inject the same props as Route  However  it carries along the limitation that you can have only 1 HoC per file   import   withRouter   from  react-router-dom   const ButtonToNavigate      history      gt       lt button     type  button      onClick       gt  history push   my-new-location       gt      Navigate    lt  button gt       ButtonToNavigate propTypes       history  React PropTypes shape       push  React PropTypes func isRequired            export default withRouter ButtonToNavigate     3 - Using a Redirect component Rendering a  lt Redirect gt  will navigate to a new location  But keep in mind that  by default  the current location is replaced by the new one  like server-side redirects  HTTP 3xx   The new location is provided by to prop  that can be a string  URL to redirect to  or a location object  If you want to push a new entry onto the history instead  pass a push prop as well and set it to true   lt Redirect to   your-new-location  push   gt    4 - Accessing router manually through context A bit discouraged because context is still an experimental API and it is likely to break change in future releases of React  const ButtonToNavigate    props  context    gt       lt button     type  button      onClick       gt  context router history push   my-new-location       gt      Navigate to a new location    lt  button gt      ButtonToNavigate contextTypes       router  React PropTypes shape       history  React PropTypes object isRequired             Needless to say there are also other Router components that are meant to be for non browser ecosystems  such as  lt NativeRouter gt  that replicates a navigation stack in memory and targets React Native platform  available through react-router-native package   For any further reference  don t hesitate to take a look at the official docs  There is also a video made by one of the co-authors of the library that provides a pretty cool introduction to react-router v4  highlighting some of the major changes

User · Answer

Step 1  There is only one thing to import on top    import  Route  from  react-router-dom     Step 2  In your Route  pass the history    lt Route   exact   path   posts add    render    history     gt         lt PostAdd history  history    gt         gt    Step 3  history gets accepted as part of props in the next Component  so you can simply     this props history push         That was easy and really powerful

User · Answer

Since there s no other way to deal with this horrible design  I wrote a generic component that uses the withRouter HOC approach  The example below is wrapping a button element  but you can change to any clickable element you need   import React from  react   import PropTypes from  prop-types   import   withRouter   from  react-router-dom    const NavButton    props    gt       lt Button onClick       gt  props history push props to   gt       props children     lt  Button gt      NavButton propTypes       history  PropTypes shape       push  PropTypes func isRequired         to  PropTypes string isRequired     export default withRouter NavButton     Usage    lt NavButton to   somewhere  gt Click me lt  NavButton gt

[reactjs] Programmatically navigate using react router V4

Examples related to reactjs

Examples related to ecmascript-6

Examples related to react-router-v4