How to pass params with history push Link Redirect in react-router v4

Question

How can we pass parameter with this props history push   page   in React-Router v4    then response   gt           var r   this          if  response status  gt   200  amp  amp  response status  lt  300                 r props history push   template

User · Answer

I created a custom useQuery hook import   useLocation   from  quot react-router-dom quot    const useQuery       URLSearchParams   gt      return new URLSearchParams useLocation   search     export default useQuery  Use it as const query   useQuery    const id   query get  quot id quot   as string  Send it as so history push      pathname   quot  template quot    search   id   values id

User · Answer

You can use location to send state to other component  like this In your Source Component this props history push pathComponent  sendState    pathComponent is target component that will receive the state In your Target Component you can receive the state like this if your use class component  Javascript version  constructor props      this state   this props location state     Typescript version  constructor props          const receiveState   this props location state as StateType    you must parse into your state interface or type   this state   receiveState    Bonus If you want to reset the received state  Use history to replace the location  like this this props history  pathName  currentPath  state  resetState    currentPath is the Target Component path resetState is new value state whatever you want

User · Answer

It is not necessary to use withRouter  This works for me   In your parent page     lt BrowserRouter gt      lt Switch gt           lt Route path   routeA  render   props   gt               lt ComponentA     props  propDummy  50    gt               gt            lt Route path   routeB  render   props   gt               lt ComponentB     props  propWhatever  100    gt                 gt          lt  Switch gt   lt  BrowserRouter gt    Then in ComponentA or ComponentB you can access      this props history   object  including the this props history push method

User · Answer

Add on info to get query parameters    const queryParams   new URLSearchParams this props location search   console log  assuming query param is id   queryParams get  id      For more info about URLSearchParams check this link  URLSearchParams

User · Answer

React TypeScript with Hooks From a Class   this history push         pathname   quot  unauthorized quot         state    message   quot Hello quot              UnAuthorized Functional Component interface IState     message   string     export default function UnAuthorized       const location   useLocation      const message    location state as IState  message     return        lt div className  quot jumbotron quot  gt         lt h6 gt  message  lt  h6 gt       lt  div gt

User · Answer

you can use    this props history push   template        response    or this props history push   template     response  response     then you can access the parsed data from  template component by following code    const state   this props location state  Read more about React Session History Management

User · Answer

If you need to pass URL params  theres a great post explanation by Tyler McGinnis on his site  Link to the post  here are code examples    on the history push component   this props history push   home   this state userID    on the router component you define the route    lt Route path   home myKey  component  Home    gt  on the Home component    componentDidMount        const   myKey     this props match params     console log myKey

User · Answer

First of all  you need not do var r   this  as this in if statement refers to the context of the callback itself which since you are using arrow function refers to the React component context   According to the docs      history objects typically have the following properties and methods          length -  number  The number of entries in the history stack   action -  string  The current action  PUSH  REPLACE  or POP    location -  object  The current location  May have the following    properties          pathname -  string  The path of the URL   search -  string  The URL query string   hash -  string  The URL hash fragment   state -  string  location-specific state that was provided to e g     push path  state  when this location was pushed onto the   stack  Only     available in browser and memory history       push path   state   -  function  Pushes a new entry onto the history    stack   replace path   state   -  function  Replaces the current entry on the    history stack   go n  -  function  Moves the pointer in the history stack by n    entries   goBack   -  function  Equivalent to go -1    goForward   -  function  Equivalent to go 1    block prompt  -  function  Prevents navigation      So while navigating you can pass props to the history object like  this props history push     pathname    template     search    query abc     state    detail  response data        or similarly for the Link component or the Redirect component   lt Link to          pathname    template         search    query abc         state    detail  response data          gt  My Link  lt  Link gt    and then in the component which is rendered with  template route  you can access the props passed like  this props location state detail   Also keep in mind that  when using history or location objects from props you need to connect the component with withRouter   As per the Docs      withRouter      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 re-render its component every time the route changes with the   same props as  lt Route gt  render props    match  location  history

User · Answer

To use React 16 8  withHooks  you can use this way  import React from  react   import   useHistory   from  react-router-dom    export default function SomeFunctionalComponent     let history   useHistory       should be called inside react component  const handleClickButton        gt         funcionAPICALL          then response   gt                 if  response status  gt   200  amp  amp  response status  lt  300                     history push   template                         return    lt div gt  Some component stuff       lt p gt To make API POST request and redirect to   template  click a button API CALL lt  p gt       lt button onClick  handleClickButton  gt API CALL lt button gt   lt  div gt        Source here to read more https   reacttraining com react-router web example auth-workflow

User · Answer

Extending the solution  suggested by Shubham Khatri  for use with React hooks  16 8 onwards    package json  always worth updating to latest packages                     react     16 12 0         react-router-dom     5 1 2                  Passing parameters with history push   import   useHistory   from  react-router-dom    const FirstPage   props   gt        let history   useHistory         const someEventHandler   event   gt           history push              pathname    secondpage              search    query abc              state    detail   some value                           export default FirstPage      Accessing the passed parameter using useLocation from  react-router-dom    import   useEffect   from  react   import   useLocation   from  react-router-dom    const SecondPage   props   gt        const location   useLocation         useEffect      gt           console log location pathname      result    secondpage         console log location search      result    query abc         console log location state detail      result   some value          location

User · Answer

For the earlier versions   history push   path   yourData     And get the data in the related component just like below   this props location state    it is equal to yourData  For the newer versions the above way works well but there is a new way   history push     pathname    path     customNameData  yourData        And get the data in the related component just like below   this props location customNameData    it is equal to yourData    Hint  the state key name was used in the earlier versions and for newer versions  you can use your custom name to pass data and using state name is not essential

[reactjs] How to pass params with history.push/Link/Redirect in react-router v4?

Examples related to reactjs

Examples related to react-router