React-router How to manually invoke Link

Question

I m new to ReactJS and to React-Router  I have a component that receives through props a  lt Link  gt  object from react-router  Whenever the user clicks on a  next  button inside this component I want to invoke  lt Link  gt  object manually   Right now  I m using refs to access the backing instance and manually clicking on the  a  tag that  lt Link  gt  generates    Question  Is there a way to manually invoke the Link  e g  this props next go    This is the current code I have     in MasterPage js var sampleLink    lt Link to   sample  gt Go To Sample lt  Link gt   lt Document next  sampleLink    gt     in Document js     var Document   React createClass       onClickNext  function           var next   this refs next getDOMNode          next querySelectorAll  a   item 0  click      this sounds like hack to me          render  function           return                          lt div ref  next  gt  this props next   lt img src  rightArrow png  onClick  this  onClickNext   gt  lt  div gt                                       This is the code I would like to have     in MasterPage js var sampleLink    lt Link to   sample  gt Go To Sample lt  Link gt   lt Document next  sampleLink    gt     in Document js     var Document   React createClass      render  function           return                          lt div onClick  this props next go  gt  this props next label   lt img src  rightArrow png    gt   lt  div gt

User · Answer

React Router 4  You can easily invoke the push method via context in v4   this context router push this props exitPath    where context is   static contextTypes         router  React PropTypes object

User · Answer

Ok  I think I was able to find a proper solution for that   Now  instead of sending  lt Link  gt  as prop to Document  I send  lt NextLink  gt  which is a custom wrapper for the react-router Link  By doing that  I m able to have the right arrow as part of the Link structure while still avoiding to have routing code inside Document object   The updated code looks like follows     in NextLink js var React   require  react    var Right   require    Right     var NextLink   React createClass       propTypes            link  React PropTypes node isRequired             contextTypes            transitionTo  React PropTypes func isRequired              onClickRight  function             this context transitionTo this props link props to               render  function             return                lt div gt                   this props link                   lt Right onClick  this  onClickRight    gt               lt  div gt                          module exports   NextLink         in MasterPage js var sampleLink    lt Link to   sample  gt Go To Sample lt  Link gt  var nextLink    lt NextLink link  sampleLink    gt   lt Document next  nextLink    gt     in Document js     var Document   React createClass      render  function           return                          lt div gt  this props next  lt  div gt                                       P S  If you are using the latest version of react-router you may need to use this context router transitionTo instead of this context transitionTo  This code will work fine for react-router version 0 12 X

User · Answer

React Router 4 includes a withRouter HOC that gives you access to the history object via this props   import React   Component  from  react  import  withRouter  from  react-router-dom   class Foo extends Component     constructor props        super props       this goHome   this goHome bind this         goHome         this props history push             render          lt div className  foo  gt         lt button onClick  this goHome    gt       lt  div gt         export default withRouter Foo

User · Answer

If you d like to extend the Link component to utilise some of the logic in it s onClick   handler  here s how  import React from  react   import   Link   from  quot react-router-dom quot       Extend react-router-dom Link to include a function for validation  class LinkExtra extends Link     render         const linkMarkup   super render        const   validation     rest    linkMarkup props     Filter out props for  lt a gt       const onclick   event   gt          if   this props validation    this props validation              this handleClick event           else           event preventDefault            console log  quot Failed validation quot                       return         lt a     rest  onClick  onclick    gt               export default LinkExtra   Usage  lt LinkExtra to  quot  mypage quot  validation       gt  false  gt Next lt  LinkExtra gt

User · Answer

again this is JS     this still works       var linkToClick   document getElementById  something    linkToClick click      lt Link id  something  to   somewhaere  gt  the link  lt  Link gt

User · Answer

React Router v5 - React 16 8  with Hooks  updated 09 23 2020  If you re leveraging React Hooks  you can take advantage of the useHistory API that comes from React Router v5  import React   useCallback  from  react   import  useHistory  from  react-router-dom    export default function StackOverflowExample       const history   useHistory      const handleOnClick   useCallback      gt  history push   sample     history       return        lt button type  quot button quot  onClick  handleOnClick  gt        Go home      lt  button gt          Another way to write the click handler if you don t want to use useCallback const handleOnClick        gt  history push   sample     React Router v4 - Redirect Component The v4 recommended way is to allow your render method to catch a redirect  Use state or props to determine if the redirect component needs to be shown  which then trigger s a redirect   import   Redirect   from  react-router           your class implementation  handleOnClick        gt         some action         then redirect   this setState  redirect  true       render       if  this state redirect        return  lt Redirect push to  quot  sample quot    gt          return  lt button onClick  this handleOnClick  type  quot button quot  gt Button lt  button gt      Reference  https   reacttraining com react-router web api Redirect React Router v4 - Reference Router Context You can also take advantage of Router s context that s exposed to the React component  static contextTypes       router  PropTypes shape       history  PropTypes shape         push  PropTypes func isRequired        replace  PropTypes func isRequired        isRequired      staticContext  PropTypes object      isRequired     handleOnClick        gt      this context router push   sample       This is how  lt Redirect   gt  works under the hood  Reference  https   github com ReactTraining react-router blob master packages react-router modules Redirect js L46 L60 React Router v4 - Externally Mutate History Object If you still need to do something similar to v2 s implementation  you can create a copy of BrowserRouter then expose the history as an exportable constant  Below is a basic example but you can compose it to inject it with customizable props if needed  There are noted caveats with lifecycles  but it should always rerender the Router  just like in v2  This can be useful for redirects after an API request from an action function     browser router file    import createHistory from  history createBrowserHistory   import   Router   from  react-router    export const history   createHistory     export default class BrowserRouter extends Component     render         return  lt Router history  history  children  this props children    gt            your main file    import BrowserRouter from    relative path to BrowserRouter   import   render   from  react-dom    render     lt BrowserRouter gt       lt App  gt     lt  BrowserRouter gt         some file    where you don t have React instance references import   history   from    relative path to BrowserRouter    history push   sample     Latest BrowserRouter to extend  https   github com ReactTraining react-router blob master packages react-router-dom modules BrowserRouter js React Router v2 Push a new state to the browserHistory instance  import  browserHistory  from  react-router          browserHistory push   sample     Reference  https   github com reactjs react-router blob master docs guides NavigatingOutsideOfComponents md

User · Answer

https   github com rackt react-router blob bf89168acb30b6dc9b0244360bcbac5081cf6b38 examples transitions app js L50  or you can even try executing onClick this  more violent solution    window location assign   sample

User · Answer

In the version 5 x  you can use useHistory hook of react-router-dom      Sample extracted from https   reacttraining com react-router core api Hooks usehistory 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

[javascript] React-router: How to manually invoke Link?

React Router 4

Examples related to javascript

Examples related to reactjs

Examples related to react-router