在React中獲取URL后面的參數,可以使用react-router-dom
提供的useParams
鉤子函數。
首先,確保你已經安裝了react-router-dom
:
npm install react-router-dom
然后,在需要獲取URL參數的組件中,導入useParams
:
import { useParams } from 'react-router-dom';
接下來,在組件函數中調用useParams
獲取URL參數:
function MyComponent() {
const params = useParams();
const { id } = params;
// 使用獲取到的參數進行其他操作
// ...
return (
// 組件的JSX代碼
);
}
在上面的例子中,我們假設URL的格式為/example/:id
,其中id
是我們想要獲取的參數。
最后,你可以通過params
對象來訪問獲取到的URL參數,如const { id } = params;
。在這個例子中,我們將參數保存在id
變量中,可以在組件中使用它進行其他操作。
需要注意的是,useParams
只能在被<Route>
組件包裹的組件中使用,因為它依賴于react-router-dom
提供的路由機制。