xxxxxxxxxx
// Passing data via react-router
// 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().state;
console.log(data)
return (
<div>got the data</div>
);
}
xxxxxxxxxx
const Greeting = ({ text }) => {
return <p>{text}</p>;
};
const App = () => {
return <Greeting text="Hello React" />;
};
xxxxxxxxxx
import React from 'react'
export default function Parent() {
return (
<div>
</div>
)
}