Breaking News: Grepper is joining You.com. Read the official announcement!

uselocation and usenavigate send value react router

mouaadBch answered on June 1, 2022 Popularity 4/10 Helpfulness 9/10

answer uselocation and usenavigate send value react router

related usenavigate and uselocation in react

uselocation and usenavigate send value react router

Comment

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;
//Now we will get the data in Component B.
import {useLocation} from 'react-router-dom';
 function ComponentB() {
    const location = useLocation();
    return (
      <>
		<div>{location.state.name}</div>
      </>
    )
}
export default ComponentB;

Popularity 4/10 Helpfulness 9/10 Language javascript

Source: stackoverflow.com

Tags: javascript react-router send

Link to this answer
Share Copy Link

Contributed on Jan 03 2023

mouaadBch

0 Answers Avg Quality 2/10

Closely Related Answers

usenavigate and uselocation in react

Comment

// on first component
import React from "react";
import { useNavigate } from "react-router-dom";

const Component1 = () => {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate("/store", { state: "an object or single value" })} >
    Click Me
    </button>
  );
}

// on 2nd component
import React from "react";
import { useLocation } from "react-router-dom";

const Component1 = () => {
  const data = useLocation();
  console.log(data)
  return (
    <div>got the data</div>
  );
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 01 2022

Tender Turtle

0 Answers Avg Quality 2/10

uselocation and usenavigate send value react router

Contents

More Related Answers

uselocation and usenavigate send value react router

Closely Related Answers

usenavigate and uselocation in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.