已解決：將參數添加到 url 反應路由器

將參數添加到 URL React Router 的主要問題是參數很容易被用戶操縱。 這可能會導致安全問題，因為惡意用戶可能會使用這些參數來訪問未經授權的資源或數據。 此外，如果未正確驗證參數值，可能會導致應用程序出現意外行為。 最後，如果添加的參數過多，可能會因 URL 的複雜性增加而導致性能問題。

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

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. 從“react-router-dom”導入 { BrowserRouter as Router, Route, Link, useParams }；
// 這將從將在此代碼中使用的 react-router-dom 庫中導入組件。

2. // 這將創建一個路由器組件，它將處理不同路由之間的導航。

3. // 這將創建一個動態參數為“用戶名”的路由。

4. // 當這條路由匹配時，渲染 User 組件。

5. John // 這將創建一個指向 /user/john 路由的鏈接，該路由將在單擊時以“john”作為用戶名參數呈現用戶組件。

6. function User() { //這是一個函數式組件，它將用戶名作為參數，並在通過單擊其上方的鏈接調用時將其呈現在 div 標籤內。

7.讓{用戶名} = useParams(); //這使用解構從 useParams() 獲取對用戶名的訪問。

8.返回（

{用戶名}

); //這將返回一個 div 元素，其中包含傳遞給用戶名的任何值，在本例中為“john”。

什麼是反應路由器

React Router 是 React 應用程序的路由庫。 它提供了創建具有在不同頁面之間導航的單頁應用程序 (SPA) 所需的核心組件和功能。 它允許開發人員定義路由，即映射到應用程序中特定組件的路徑。 React Router 還提供了重定向、動態路由匹配和查詢參數等功能。

URL 的參數

React Router 中的 URL 參數允許開發人員將動態數據從 URL 傳遞到 React 組件。 這對於創建可用於根據 URL 中傳遞的參數顯示不同內容的動態路由很有用。 例如，像“/user/:id”這樣的路由可用於顯示用戶配置文件頁面，並在 URL 中傳遞一個 id 參數。 參數還可用於過濾數據或其他需要來自 URL 的動態數據的操作。

如何在 React 中向 URL 添加參數

在 React Router 中向 URL 添加參數是使用“params”對象完成的。 該對象允許您傳入將添加到 URL 的鍵值對。 要添加參數，只需將其添加到 params 對象，如下所示：

const params = { param1: 'value1', param2: 'value2' };

然後，在創建路線時，您可以像這樣將 params 對像作為參數傳遞：

導航到此路由時，參數將被添加到 URL。

相關文章：

發表評論