Gancho useParams de ReactJS

En nuestra aplicación React a veces queremos acceder a los parámetros de la ruta actual, en este caso entra en acción el gancho useParams. El paquete react-router-dom tiene enlaces useParams que le permiten acceder a los parámetros de la ruta actual.

Sintaxis:

useParams();

Creación de la aplicación React e instalación de los módulos necesarios:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app useparams_react

• Paso 2: después de crear la carpeta de su proyecto, es decir, useparams_react, muévase a ella con el siguiente comando.

  cd useparams_react

• Paso 3: después de crear la aplicación ReactJS, instale los paquetes react-router-dom y react-dom con el siguiente comando.

  npm install --save react-router-dom react-dom

Estructura del proyecto:

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from "react";
  
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams,
} from "react-router-dom";
  
function BlogPost() {
  let { id } = useParams();
  return <div style={{ fontSize: "50px" }}>
           Now showing post {id}
         </div>;
}
  
function Home() {
  return <h3>home page </h3>;
}
  
function App() {
  return (
    <Router>
      <Switch>
        <Route path="/page/:id">
          <BlogPost />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida. Puede ver lo que ha pasado en la URL como «: id» se muestra en la pantalla. De esta forma, puede acceder a los parámetros de la URL de la ruta actual.