要使用钩子从 React 组件中的 URL 中提取参数useParams，请按照

1. 确保已react-router-dom在项目中安装。如果没有，你可以使用 npm 或 yarn 安装：

npm install react-router-dom

或者

yarn add react-router-dom

1. App.js在你定义 r 的文件中设置你的路线

```
import React from ‘react’;
import {

BrowserRouter as Router,
Route,
Routes,
}
} fro
from ‘react-router-dom’;

im
import Solution from ‘./Solution’;

functi
function App() {

 r

return (

   <<Router>
     <Routes>
       <Route path="/:id/solution" element={<Solution />} />
     </Routes>
   </Router>
 );

}

 );

}

expor

 );

}

ex

 );

}

 );



     <


       <Route path="/:id/solution" element={<So

     <

export default App;
```

1. 创建Solution组件

```
jsx复制代码import React from ‘react’;

impor

im
import { useParams } from ‘react-router-dom’;

function Solution() {
const { id } = useParams();

 return (
   <div>
     <h1>Solution Component</h1>
     <p>The extracted ID is: {id}</p>
   </div>
 );

}

export default Solution;
```

以下是具体情况：

• 在App组件中，我们设置了一个带有路径的路由/:id/solution。:id部分是我们要提取的URL参数。
• 该Solution组件使用useParams钩子来react-router-dom访问 URL 参数。useParams钩子返回一个对象，其中的键是 URL 参数的名称，值是 URL 中的对应值。
• 在Solution组件中，我们id从返回的对象中进行解构useParams并将其显示在组件中。

现在，当您导航到 时http://localhost:3010/9/solution，Solution组件将提取参数（在本例中id为）并显示它。9