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

usenavigate and uselocation in react

Add Answer

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

answer usenavigate and uselocation in react

related uselocation and usenavigate send value react router

related useNavigate with useLocation

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

Link to this answer
Share Copy Link

Contributed on Jun 01 2022

Tender Turtle

0 Answers Avg Quality 2/10

Closely Related Answers

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

useNavigate with useLocation

Comment

const handleClick = (data) => {
    navigate("/post", {state: data});
  };

// in /post page

const {state} = useState()

const fetchedData=state && state.data

//visit metakul for more help and fun

Popularity 3/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Feb 20 2024

Shubham Kunwar

0 Answers Avg Quality 2/10

usenavigate and uselocation in react

Contents

More Related Answers

usenavigate and uselocation in react

Closely Related Answers

uselocation and usenavigate send value react router

useNavigate with useLocation

Grepper

Documentation

Social

Legal

Contact

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