/Javascript/React/Sending props via navigate() of react router v6

Sending props via navigate() of react router v6

import {Link, useNavigate} from 'react-router-dom';

function ComponentA(props) {

  const navigate = useNavigate();

  const toComponentB=()=>{
navigate('/componentB',{state:{id:1,name:'sabaoon'}});
  }

  return (
   <>
<div> <a onClick={()=>{toComponentB()}}>Component B<a/></div>
</>
  );


}


export default ComponentA;

Source: stackoverflow.com

Sending props via navigate() of react router v6

import {useLocation} from 'react-router-dom';

 function ComponentB() {

    const location = useLocation();
   
        return (

            <>
               
<div>{location.state.name}</div>

            </>
        )
    }

export default ComponentB;

Source: stackoverflow.com

Similar codes

0 vote131 views1 answer
Concept of node js with react js
Javascript React
4 votes135 views2 answers
Set selected option react
Javascript React
26 votes133 views6 answers
React redirect to url
Javascript React
38 votes130 views2 answers
How to comment out code in react js
Javascript React
0 vote164 views1 answer
React controllers
Javascript React
11 votes129 views3 answers
Reactjs get url query params as object
Javascript React
0 vote142 views1 answer
Websocket with Node and React
Javascript React
0 vote171 views1 answer
Gesture handling with react native expo
Javascript React
0 vote135 views2 answers
React router dom link same page with different param
Javascript React
0 vote120 views1 answer
React should write method in a functional component or outside functional component
Javascript React