Programmatically navigate using React router

Question

With react-router I can use the Link element to create links which are natively handled by react router    I see internally it calls this context transitionTo        I want to do a navigation  Not from a link  but from a dropdown selection  as an example   How can I do this in code  What is this context    I saw the Navigation mixin  but can I do this without mixins

User · Answer

This worked for me  no special imports needed    lt input    type  button     name  back     id  back     class  btn btn-primary     value  Back     onClick       gt    this props history goBack         gt

User · Answer

React-Router 5 1 0  Answer  using hooks and React  16 8    You can use the new useHistory hook on Functional Components and Programmatically navigate   import   useHistory   from  react-router-dom    function HomeButton       let history   useHistory         use history push   some path   here         React-Router 4 0 0  Answer   In 4 0 and above  use the history as a prop of your component   class Example extends React Component         use  this props history push   some path    here      NOTE  this props history does not exist in the case your component was not rendered by  lt Route gt   You should use  lt Route path       component  YourComponent   gt  to have this props history in YourComponent     React-Router 3 0 0  Answer   In 3 0 and above  use the router as a prop of your component   class Example extends React Component         use  this props router push   some path    here         React-Router 2 4 0  Answer   In 2 4 and above  use a higher order component to get the router as a prop of your component   import   withRouter   from  react-router    class Example extends React Component         use  this props router push   some path    here        Export the decorated class var DecoratedExample   withRouter Example       PropTypes Example propTypes       router  React PropTypes shape       push  React PropTypes func isRequired      isRequired         React-Router 2 0 0  Answer   This version is backwards compatible with 1 x so there s no need to an Upgrade Guide  Just going through the examples should be good enough   That said  if you wish to switch to the new pattern  there s a browserHistory module inside the router that you can access with  import   browserHistory   from  react-router   Now you have access to your browser history  so you can do things like push  replace  etc    Like   browserHistory push   some path    Further reading  Histories and Navigation       React-Router 1 x x Answer   I will not go into upgrading details  You can read about that in the Upgrade Guide  The main change about the question here is the change from Navigation mixin to History  Now it s using the browser historyAPI to change route so we will use pushState   from now on   Here s an exemple using Mixin   var Example   React createClass     mixins    History      navigateToHelpPage          this history pushState null    help             Note that this History comes from rackt history project  Not from React-Router itself   If you don t want to use Mixin for some reason  maybe because of ES6 class   then you can access the history that you get from the router from this props history  It will be only accessible for the components rendered by your Router  So  if you want to use it in any child components it needs to be passed down as an attribute via props   You can read more about the new release at their 1 0 x documentation  Here is a help page specifically about navigating outside your component  It recommends grabbing a reference history   createHistory   and calling replaceState on that      React-Router 0 13 x Answer   I got into the same problem and could only find the solution with the Navigation mixin that comes with react-router   Here s how I did it  import React from  react   import  Navigation  from  react-router    let Authentication   React createClass     mixins   Navigation      handleClick e        e preventDefault         this transitionTo               render        return   lt div onClick  this handleClick  gt Click me  lt  div gt              I was able to call transitionTo   without the need to access  context  Or you could try the fancy ES6 class  import React from  react    export default class Authentication extends React Component     constructor props        super props       this handleClick   this handleClick bind this          handleClick e        e preventDefault         this context router transitionTo              render        return   lt div onClick  this handleClick  gt Click me  lt  div gt           Authentication contextTypes       router  React PropTypes func isRequired         React-Router-Redux      Note  if you re using Redux  there is another project called   React-Router-Redux that gives you   redux bindings for ReactRouter  using somewhat the same approach that   React-Redux does   React-Router-Redux has a few methods available that allow for simple navigating from inside action creators  These can be particularly useful for people that have existing architecture in React Native  and they wish to utilize the same patterns in React Web with minimal boilerplate overhead   Explore the following methods    push location  replace location  go number  goBack   goForward     Here is an example usage  with Redux-Thunk     actioncreators js  import   goBack   from  react-router-redux   export const onBackPress        gt   dispatch    gt  dispatch goBack        viewcomponent js   lt button   disabled  submitting    className  cancel button    onClick   e    gt        e preventDefault       this props onBackPress         gt    CANCEL  lt  button gt

User · Answer

EDIT  React Router v6 I haven t touched React in a while  but want to thank and highlight the comment below by  Shimrit Snapir  on React-Router 6 0  lt Redirect   gt  changed to  lt Navigate   gt   React Router V4 tl dr  if  navigate      return  lt Redirect to  quot   quot  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  quot   quot  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

React-Router V4  if you re using version 4 then you can use my library  Shameless plug  where you simply dispatch an action and everything just works   dispatch navigateTo   aboutUs       trippler

User · Answer

In React-Router v4 and ES6   You can use withRouter and this props history push   import  withRouter  from  react-router-dom    class Home extends Component        componentDidMount             this props history push   redirect-to             export default withRouter Home

User · Answer

In react router v4  I follow this two way to route programmatically   1  this props history push   something something   2  this props history replace   something something     Number two      Replaces the current entry on the history stack   To get history in props you may have to wrap your component with      withRouter

User · Answer

May not be the best approach but    Using react-router v4  the following Typescript could give an idea for some    In the rendered component below  e g  LoginPage  router object is accessible and just call router transitionTo   homepage   to navigate   Navigation code was taken from       react-router     4 0 0-2    react     15 3 1     x000D   x000D  import Router from  react-router BrowserRouter   x000D  import   History   from  react-history BrowserHistory   x000D  import createHistory from  history createBrowserHistory   x000D  const history   createHistory    x000D   x000D  interface MatchWithPropsInterface   x000D    component  typeof React Component  x000D    router  Router  x000D    history  History  x000D    exactly   any  x000D    pattern  string x000D    x000D   x000D  class MatchWithProps extends React Component lt MatchWithPropsInterface any gt    x000D    render     x000D      return  x000D         lt Match     this props  render   matchProps    gt    x000D               React createElement this props component  this props  x000D   x000D             x000D           gt  x000D        x000D      x000D    x000D   x000D  ReactDOM render  x000D       lt Router gt  x000D            router      gt    x000D           lt div gt  x000D             lt MatchWithProps exactly pattern     component  LoginPage  router  router  history  history    gt  x000D             lt MatchWithProps pattern   login  component  LoginPage  router  router  history  history    gt  x000D             lt MatchWithProps pattern   homepage  component  HomePage  router  router  history  history    gt  x000D             lt Miss component  NotFoundView    gt  x000D           lt  div gt  x000D           x000D       lt  Router gt   x000D   x000D     document getElementById  app   x000D     x000D   x000D   x000D

User · Answer

The right answer was for me at the time of writing  this context router history push         But you need to add PropTypes to your component  Header contextTypes       router  PropTypes object isRequired   export default Header    Don t forget to import PropTypes  import PropTypes from  prop-types

User · Answer

To do the navigation programmatically  you need to push a new history to the props history in your component  so something like this can do the work for you     using ES6 import React from  react    class App extends React Component      constructor props        super props      this handleClick   this handleClick bind this         handleClick e        e preventDefault          Look at here  you can add it here        this props history push   redirected           render         return          lt div gt           lt button onClick  this handleClick  gt            Redirect             lt  button gt         lt  div gt               export default App

User · Answer

React-Router v2   For the most recent release  v2 0 0-rc5   the recommended navigation method is by directly pushing onto the history singleton  You can see that in action in the Navigating outside of Components doc    Relevant excerpt   import   browserHistory   from  react-router   browserHistory push   some path      If using the newer react-router API  you need to make use of the history from this props when inside of components so   this props history push   some path      It also offers pushState but that is deprecated per logged warnings   If using react-router-redux  it offers a push function you can dispatch like so   import   push   from  react-router-redux   this props dispatch push   some path       However this may be only used to change the URL  not to actually navigate to the page

User · Answer

For React Router v4    Assuming that you won t be needing to navigate during the initial render itself  for which you can use  lt Redirect gt  component   this is what we are doing in our app   Define an empty route which returns null  this will allow you to get the access to the history object  You need to do this at the top level where your Router is defined   Now you can do all the things that can be done on history like history push    history replace    history go -1  etc   import React from  react   import   HashRouter  Route   from  react-router-dom    let routeHistory   null   export function navigateTo path      if routeHistory     null        routeHistory push path          export default function App props      return        lt HashRouter hashType  noslash  gt         lt Route         render     history      gt              routeHistory   history            return null                     gt            Rest of the App          lt  HashRouter gt

User · Answer

Warning  this answer covers only ReactRouter versions before 1 0 I will update this answer with 1 0 0-rc1 use cases after   You can do this without mixins too  let Authentication   React createClass     contextTypes        router  React PropTypes func        handleClick e        e preventDefault        this context router transitionTo              render        return   lt div onClick  this handleClick  gt Click me  lt  div gt             The gotcha with contexts is that it is not accessible unless you define the contextTypes on the class  As for what is context  it is an object  like props  that are passed down from parent to child  but it is passed down implicitly  without having to redeclare props each time  See https   www tildedave com 2014 11 15 introduction-to-contexts-in-react-js html

User · Answer

Try hookrouter instead   quot the modern alternative to react-router quot  https   www npmjs com package hookrouter import   useRoutes  usePath  A  from  quot hookrouter quot    to answer OP question about linking through select box you can do it  navigate   about         UPDATED ANSWER     I think hook-router was a good starter kit and helped me learn about routing but have since updated to react-router for it s history and query parameter handling  import   useLocation  useHistory   from  react-router-dom     const Component    props    gt        const history   useHistory                Programmatically navigate     history push newUrlString      You push where you want to navigate into the location history

User · Answer

If happen to pair RR4 w  redux through react-router-redux  use the routing action creators from react-router-redux is a option as well   import   push  replace        from  react-router-redux   class WrappedComponent extends React Component     handleRedirect url  replaceState   true         replaceState          this props dispatch replace url            this props dispatch push url          render              export default connect null  WrappedComponent    If use redux thunk saga to manage async flow  import the above action creators in redux actions and hook to react components using mapDispatchToProps might be better

User · Answer

If you are using hash or browser history then you can do  hashHistory push   login    browserHistory push   login

User · Answer

react-router-dom  5 1 2    This site has 3 pages  all of which are rendered  dynamically in the browser   Although the page does not ever refresh  notice how  React Router keeps the URL up to date as you navigate  through the site  This preserves the browser history   making sure things like the back button and bookmarks work properly  A Switch looks through all its children        elements and renders the first one whose path       matches the current URL  Use a  any time       you have multiple routes  but you want only one       of them to render at a time   import React from  react   import     BrowserRouter as Router    Switch    Route    Link   from  react-router-dom      export default function BasicExample       return        lt Router gt         lt div gt           lt ul gt             lt li gt               lt Link to     gt Home lt  Link gt             lt  li gt             lt li gt               lt Link to   about  gt About lt  Link gt             lt  li gt             lt li gt               lt Link to   dashboard  gt Dashboard lt  Link gt             lt  li gt           lt  ul gt            lt hr   gt            lt Switch gt             lt Route exact path     gt               lt Home   gt             lt  Route gt             lt Route path   about  gt               lt About   gt             lt  Route gt             lt Route path   dashboard  gt               lt Dashboard   gt             lt  Route gt           lt  Switch gt         lt  div gt       lt  Router gt             You can think of these components as  pages     in your app   function Home       return        lt div gt         lt h2 gt Home lt  h2 gt       lt  div gt          function About       return        lt div gt         lt h2 gt About lt  h2 gt       lt  div gt          function Dashboard       return        lt div gt         lt h2 gt Dashboard lt  h2 gt       lt  div gt

User · Answer

based on the previous answer from Jos   Antonio Postigo and Ben Wheeler the novelty  is to be written in Typescript and the use of decorators OR static property field    import   as React from  react   import Component   React Component  import   withRouter   from  react-router    export interface INavigatorProps       router   ReactRouter History History            Note  goes great with mobx      inject  something    withRouter  observer      withRouter export class Navigator extends Component lt INavigatorProps     gt       navigate   to  string    gt  void      constructor props  INavigatorProps            super props           let self   this          this navigate    to    gt  self props router push to             render             return                lt ul gt                   lt li onClick       gt  this navigate   home    gt                      Home                  lt  li gt                   lt li onClick       gt  this navigate   about    gt                      About                  lt  li gt               lt  ul gt                            Non decorated      export class Navigator2 extends Component lt INavigatorProps     gt         static contextTypes             router  React PropTypes object isRequired              navigate   to  string    gt  void      constructor props  INavigatorProps  context  any            super props  context           let s   this          this navigate    to    gt              s context router push to             render             return                lt ul gt                   lt li onClick       gt  this navigate   home    gt                      Home                  lt  li gt                   lt li onClick       gt  this navigate   about    gt                      About                  lt  li gt               lt  ul gt                      with whatever npm installed today   react-router     3 0 0  and   types react-router     2 0 41

User · Answer

Those who are facing issues in implementing this on react-router v4   Here is a working solution for navigating through the react app from redux actions   history js  import createHistory from  history createBrowserHistory   export default createHistory     App js Route jsx  import   Router  Route   from  react-router-dom  import history from    history       lt Router history  history  gt    lt Route path   test  component  Test   gt   lt  Router gt    another file js OR redux file  import history from    history    history push   test      this should change the url and re-render Test component   All thanks to this comment  ReactTraining issues comment

User · Answer

With the current React version  15 3   this props history push   location    worked for me  but it showed the following warning      browser js 49 Warning   react-router  props history and   context history are deprecated  Please use context router    and I solved it using context router like this   import React from  react    class MyComponent extends React Component        constructor props            super props           this backPressed   this backPressed bind this              backPressed             this context router push   back-location                      MyComponent contextTypes         router  React PropTypes object isRequired     export default MyComponent

User · Answer

You can also use the useHistory hook in a stateless component  Example from the docs   import   useHistory   from  react-router   function HomeButton       const history   useHistory      return        lt button type  button  onClick       gt  history push   home    gt        Go home      lt  button gt             Note  Hooks were added in react-router 5 1 0 and require react  gt  16 8

User · Answer

For this one  who does not control the server side and because of this is using hash router v2   Place your history into separate file  e g  app history js ES6    import   useRouterHistory   from  react-router  import   createHashHistory   from  history  const appHistory   useRouterHistory createHashHistory    queryKey  false      export default appHistory    And use it everywhere   Your entry point for react-router  app js ES6    import React from  react  import   render   from  react-dom  import   Router  Route  Redirect   from  react-router  import appHistory from    app history      const render      lt Router history  appHistory  gt           lt  Router gt     document querySelector   data-role  app         Your navigation inside any component  ES6    import appHistory from     app history      ajaxLogin   login    err  data    gt      if  err        console error err      login failed     else          logged in     appHistory replace   dashboard       or  push   if you don t need  replace

User · Answer

Update   React Router v6 with hooks  import  useNavigate  from  react-router-dom   let navigate   useNavigate    navigate  home      And to move across the browser history    navigate -1   --- gt  Go back navigate 1    --- gt  Go forward navigate -2   --- gt  Move two steps backward

User · Answer

Maybe not the best solution but it gets the job done   import   Link   from  react-router-dom       create functional component Post export default Post        gt         lt div className  component post  gt            lt button className  button delete-post  onClick       gt                       delete post                then redirect  without page reload  by triggering a hidden Link             document querySelector   trigger go-home   click               gt Delete Post lt  button gt            lt Link to     className  trigger go-home hidden  gt  lt  Link gt        lt  div gt       Basically  a logic tied to one action  in this case a post deletion  will end up calling a trigger for redirect  This is not ideal because you will add a DOM node  trigger  to your markup just so you can conveniently call it when needed  Also  you will directly interact with the DOM  which in a React component may not be desired   Still  this type of redirect is not required that often  So one or two extra  hidden links in your component markup would not hurt that much  especially if you give them meaningful names

User · Answer

Using the  quot useHistory quot  hook is the best option if you re using a newer version of react

User · Answer

I tried at least 10 ways of doing this before something worked right    Felipe Skinner s withRouter answer was a bit overwhelming to me  and I wasn t sure I wanted to make new  ExportedWithRouter  class names   Here s the simplest and cleanest way to do it  circa current React-Router 3 0 0 and ES6      React-Router 3 x x with ES6    import   withRouter   from  react-router    class Example extends React Component         use  this props router push   some path    here        Export the decorated class export default withRouter Example     or  if it s not your default class  export like   withRouter Example   export   Example      Note that in 3 x x  the  lt Link gt  component itself is using router push  so you can pass it anything you would pass the  lt Link to  tag  like      this props router push  pathname    some path   query   key1   val1   key2   val2

User · Answer

with React-Router v4 on the horizon  there is now a new way of doing this   import   MemoryRouter  BrowserRouter   from  react-router    const navigator   global  amp  amp  global navigator  amp  amp  global navigator userAgent  const hasWindow   typeof window      undefined   const isBrowser   typeof navigator      undefined   amp  amp  navigator indexOf  Node js       -1  const Router   isBrowser   BrowserRouter   MemoryRouter    lt Router location   page-to-go-to   gt    react-lego is an example app that shows how to use update react-router and it includes example functional tests which navigate the app

User · Answer

Simply just use this props history push   where to go

User · Answer

React Router v5 1 0 with hooks   There is a new useHistory hook in React Router  5 1 0 if you are using React  16 8 0 and functional components   import   useHistory   from  react-router-dom    function HomeButton       const history   useHistory       function handleClick         history push   home           return        lt button type  button  onClick  handleClick  gt        Go home      lt  button gt              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  lt Route gt  Use the context    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 replace will replace the current location in the array with the new one  Typically you will want to use the push method when you are navigating   In earlier versions of React Router  you had to create your own history instance  but in v4 the  lt BrowserRouter gt    lt HashRouter gt   and  lt MemoryRouter gt  components will create a browser  hash  and memory instances for you  React Router makes the properties and methods of the history instance associated with your router available through the context  under the router object   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      gt       lt button     type  button      onClick       gt    history push   new-location         gt      Click Me     lt  button gt       2  Use composition and render a  lt Route gt   The  lt Route gt  component isn t just for matching locations  You can render a pathless route and it will always match the current location  The  lt Route gt  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        gt       lt Route render     history     gt         lt button       type  button        onClick       gt    history push   new-location           gt        Click Me       lt  button gt         gt      3  Use the context   But you probably should not  The last option is one that you should only use if you feel comfortable working with React s context model  React s Context API is stable as of v16    const Button    props  context    gt       lt button     type  button      onClick       gt             context history push     history push       context history push   new-location             gt      Click Me     lt  button gt        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          1 and 2 are the simplest choices to implement  so for most use cases  they are your best bets

User · Answer

Programmatically navigate in Class-based components  import   Redirect   from  quot react-router-dom quot    class MyComponent extends React Component      state   rpath  null       const goTo   path   gt  this setState  rpath  path         render            if this state rpath               return  lt Redirect to  this state rpath   gt                                                 Hope  It helps

User · Answer

So in my answer there are 3 different ways to redirect programmatically to a route  Some of the solutions has been presented already but the following ones focused only for functional components with an additional demo application  Using the following versions   react  16 13 1 react-dom  16 13 1 react-router  5 2 0 react-router-dom  5 2 0 typescript  3 7 2  Configuration  So first of all the solution is using HashRouter  configured as follows   lt HashRouter gt             buttons for redirect       lt Switch gt         lt Route exact path  quot    home  quot  children  Home    gt         lt Route exact path  quot  usehistory quot  children  UseHistoryResult    gt         lt Route exact path  quot  withrouter quot  children  WithRouterResult    gt         lt Route exact path  quot  redirectpush quot  children  RedirectPushResult    gt         lt Route children  Home    gt       lt  Switch gt   lt  HashRouter gt   From the documentation about  lt HashRouter gt    A  lt Router gt  that uses the hash portion of the URL  i e  window location hash  to keep your UI in sync with the URL   Solutions   Using  lt Redirect gt  to push using useState   Using in a functional component  RedirectPushAction component from my repository  we can use useState to handle redirect  Tricky part is once the redirection happened we need to set the redirect state back to false  By using setTimeOut with 0 delay we are waiting until React commits Redirect to the DOM then getting back the button in order to use next time  Please find my example below  const  redirect  setRedirect    useState false   const handleRedirect   useCallback      gt        let render   null      if  redirect            render    lt Redirect to  quot  redirectpush quot  push  true    gt                      in order wait until commiting to the DOM            and get back the button for clicking next time         setTimeout      gt  setRedirect false   0             return render      redirect     return  lt  gt       handleRedirect         lt button onClick       gt  setRedirect true   gt          Redirect push      lt  button gt   lt   gt   From  lt Redirect gt  documentation   Rendering a  lt Redirect gt  will navigate to a new location  The new location will override the current location in the history stack  like server-side redirects  HTTP 3xx  do    Using useHistory hook   In my solution there is a component called UseHistoryAction which represents the following  let history   useHistory     return  lt button onClick       gt    history push   usehistory      gt      useHistory redirect  lt  button gt    The useHistory hook gives us access to the history object which helps us programmatically navigate or change routes    Using withRouter  get the history from props   Created one component called WithRouterAction  displays as below  const WithRouterAction    props any    gt        const   history     props       return  lt button onClick       gt    history push   withrouter      gt          withRouter redirect      lt  button gt     export default withRouter WithRouterAction    Reading from withRouter documentation   You can get access to the history object s properties and the closest  lt Route gt  s match via the withRouter higher-order component  withRouter will pass updated match  location  and history props to the wrapped component whenever it renders   Demo  For better representation I have built a GitHub repository with these examples  please find it below  https   github com norbitrial react-router-programmatically-redirect-examples I hope this helps

User · Answer

For ES6   React components  the following solution worked for me  I followed Felippe skinner  but added an end to end solution to help beginners like me  Below are the versions I used    quot react-router quot    quot  2 7 0 quot   quot react quot    quot  15 3 1 quot   Below is my react component where I used programmatic navigation using react-router  import React from  react    class loginComp extends React Component      constructor  context        super context       this state           uname            pwd                   redirectToMainPage            this context router replace   home           render        return  lt div gt                skipping html code                lt button onClick  this redirectToMainPage bind this   gt Redirect lt  button gt       lt  div gt            loginComp contextTypes         router  React PropTypes object isRequired      module exports   loginComp   Below is the configuration for my router   import   Router  Route  IndexRedirect  browserHistory   from  react-router    render  lt Router history  browserHistory  gt             lt Route path     component  ParentComp  gt               lt IndexRedirect to    quot  login quot   gt               lt Route path   login  component  LoginComp   gt               lt Route path   home  component  HomeComp   gt               lt Route path   repair  component  RepairJobComp    gt               lt Route path   service  component  ServiceJobComp    gt             lt  Route gt           lt  Router gt   document getElementById  root

User · Answer

React-Router 4 x Answer     On my end  I like to have a single history object that I can carry even outside components  What I like to do is to have a single history js file that I import on demand  and just manipulate it   You just have to change BrowserRouter to Router  and specify the history prop  This doesn t change anything for you except that you have your own history object that you can manipulate as you want   You need to install history  the library used by react-router   Example usage  ES6 notation    history js  import createBrowserHistory from  history createBrowserHistory  export default createBrowserHistory     BasicComponent js  import React    Component   from  react   import history from    history    class BasicComponent extends Component        goToIndex e           e preventDefault            history push                  render            return  lt a href     onClick  this goToIndex  gt Previous lt  a gt                EDIT April 16th  2018     If you have to navigate from a component that is actually rendered from a Route component  you can also access history from props  like that    BasicComponent js  import React    Component   from  react    class BasicComponent extends Component        navigate e           e preventDefault            this props history push   url               render            return  lt a href     onClick  this navigate  gt Previous lt  a gt

User · Answer

Here s how you do this with react-router v2 0 0 with ES6  react-router has moved away from mixins   import React from  react    export default class MyComponent extends React Component     navigateToPage        gt        this context router push   my-route           render         return          lt button onClick  this navigateToPage  gt Go  lt  button gt                MyComponent contextTypes       router  React PropTypes object isRequired

User · Answer

To use withRouter with a class-based component  try something like this below  Don t forget to change the export statement to use withRouter   import   withRouter   from  react-router-dom   class YourClass extends React Component     yourFunction        gt        doSomeAsyncAction      gt        this props history push   other location                render         return          lt div gt           lt Form onSubmit   this yourFunction     gt         lt  div gt               export default withRouter YourClass

[reactjs] Programmatically navigate using React router

Examples related to reactjs

Examples related to react-router