ReactJS useParams Hook

在我们的 React 应用程序中，有时我们想要访问当前路由的参数，在这种情况下 useParams 挂钩起作用。 react-router-dom 包具有 useParams 钩子，可让您访问当前路由的参数。

句法：

useParams();

创建 React 应用程序并安装所需的模块：

• 第 1 步：使用以下命令创建一个 React 应用程序。

  npx create-react-app useparams_react

• 第 2 步：创建项目文件夹（即 useparams_react）后，使用以下命令移动到该文件夹。

  cd useparams_react

• 第 3 步：创建 ReactJS 应用程序后，使用以下命令安装 react-router-dom 和 react-dom 包。

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

项目结构：

示例：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from "react";
  
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams,
} from "react-router-dom";
  
function BlogPost() {
  let { id } = useParams();
  return 

           Now showing post {id}
         
;
}
  
function Home() {
  return 
home page 
;
}
  
function App() {
  return (
    
      
        
          
        
        
          
        
      
    
  );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并访问 http://localhost:3000/，您将看到以下输出。您可以看到您在 URL 中传递的内容，因为“：id”显示在屏幕上。这样就可以访问到当前路由的URL参数了。