“So übergeben Sie Daten zwischen Komponenten in React” Code-Antworten

So übergeben Sie Daten zwischen Komponenten in React

// 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

Übergeben von Daten zwischen Komponenten in React 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

Ähnliche Antworten wie “So übergeben Sie Daten zwischen Komponenten in React”

Fragen ähnlich wie “So übergeben Sie Daten zwischen Komponenten in React”

Weitere verwandte Antworten zu “So übergeben Sie Daten zwischen Komponenten in React” auf JavaScript

Durchsuchen Sie beliebte Code-Antworten nach Sprache

Durchsuchen Sie andere Codesprachen