“cara meneruskan data antar komponen dalam reaksi” Kode Jawaban

cara meneruskan data antar komponen dalam reaksi

// Its a three step process (react-router-dom is neccessary)

// 1 - you setup component Route in a specific way. Like this
// we will pass data from component1 to component2
import {BrowserRouter as Router, Routes, Route, Link, useParams} from 'react-router-dom';

const App = () => {
  return(
    <Router>
      <Routes>
        <Route path="/component1" element={<Component1 />} />
		<Route path="/component2/:data" element={<Component2 />} />
      </Routes>
    </Router>
  )
}

// setting up component 1
const Component1 = () => {
  let pass = "hello"
  return(
    <div>
      <Link to={"/component2/"+pass}>Click me to pass "pass"</Link>
    </div>
  )
}

// Component 2
const Component2 = () => {
  const { data } = useParams();
  return(
    <div>
      <h2>The data is: {data}</h2>
    </div>
  )
}

// That's all folks
Tender Turtle

Meneruskan data antara komponen dalam reaksi JS

// 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();
  console.log(data)
  return (
    <div>got the data</div>
  );
}
Tender Turtle

Jawaban yang mirip dengan “cara meneruskan data antar komponen dalam reaksi”

Pertanyaan yang mirip dengan “cara meneruskan data antar komponen dalam reaksi”

Lebih banyak jawaban terkait untuk “cara meneruskan data antar komponen dalam reaksi” di JavaScript

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya