“Cómo usar UseParams en React” Código de respuesta

React Router DOM Corriente de ruta gancho

import { useLocation } from 'react-router-dom'

// Location is, for example: http://localhost:3000/users/new

// Care! MyComponent must be inside Router to work
const MyComponent = () => {
	const location = useLocation()
    
    // location.pathname is '/users/new'
    return <span>Path is: {location.pathname}</span>
}

export default MyComponent
Mr Dom

Cómo usar UseParams en 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

Respuestas similares a “Cómo usar UseParams en React”

Preguntas similares a “Cómo usar UseParams en React”

Más respuestas relacionadas con “Cómo usar UseParams en React” en JavaScript

Explore las respuestas de código populares por idioma

Explorar otros lenguajes de código