已解決：反應路由器 url 參數

與 React Router URL 參數相關的主要問題是它們很難在動態路由中使用。 這是因為 URL 參數是靜態的，在創建路由後無法更改。 這意味著如果用戶需要訪問具有不同參數的不同頁面，他們將需要為每個參數組合創建一個新路由。 此外，在使用 URL 參數時，可能很難跟踪所有可能的組合併確保每個組合都由路由器正確處理。

import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams
} from "react-router-dom";

 const App = () => {

   return (
     <Router>
       <div>

         <Route path="/user/:username" component={UserPage} />

       </div>
     </Router>
   );

 };

 const UserPage = () => {

   let { username } = useParams(); // Get the username from the URL.

   return (
     <div>Hello, {username}!</div> // Render a greeting with the username. 
   );

 };

這段代碼正在設置一個 React Router 來渲染一個帶有來自 URL 的用戶名的頁面。

1. 第一行從 React Router DOM 庫導入組件。
2. App 函數返回 Router 組件，其中包含一個 Route 組件，它指定任何以“/user/”開頭的 URL 都應該呈現 UserPage 組件。
3. UserPage 函數使用 useParams() 從 URL 中獲取用戶名，然後使用該用戶名呈現問候語。

網址參數

React Router 中的 URL 參數是作為 URL 的一部分傳遞給路由的數據片段。 它們允許開發人員將動態信息傳遞給路由，例如 ID 或查詢字符串。 這可用於創建動態路由，可用於顯示數據庫中的特定項目或根據用戶輸入過濾內容等。 React Router 提供了訪問和操作 URL 參數的工具，使您可以輕鬆地在應用程序中使用它們。

你如何從 React 中的路由獲取 URL 參數

在 React Router 中，您可以使用 useParams 掛鉤從路由訪問 URL 參數。 此掛鉤返回一個對象，其中包含 URL 參數的鍵值對。 例如，如果您的路由是 /user/:id，您可以使用 useParams().id 訪問 id 參數。

相關文章：

發表評論