/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

105 votes242 views1 answer
Create react app scaffolding
Javascript React
4 votes261 views3 answers
Reactjs date format dd/mm/yyyy
Javascript React
3 votes240 views1 answer
Include gif in react
Javascript React
0 vote253 views1 answer
Reactjs class exemple componentDidMount
Javascript React
0 vote251 views1 answer
Use jsx extension react-native
Javascript React
3 votes246 views3 answers
Multiple styles in react native
Javascript React
1 vote270 views1 answer
React stripe npm
Javascript React
0 vote272 views1 answer
21:216 Error: Unknown property 'crossorigin' found, use 'crossOrigin' instead react/no-unknown-property
Javascript React
0 vote274 views1 answer
Filter based on input typing react
Javascript React
0 vote242 views1 answer
How do i make a link to direct me to a new page when i click on a button in react
Javascript React