如何在 React-Router 的「Link」元件中傳遞 Props？

在React-Router的「連結」中傳遞Props

當React與React-Router一起使用時，你可以使用以下方式將屬性傳遞給新視圖 中的修改語法

更新了React-Router v4 和v5 中的語法

要在React-Router v4 和v5中傳遞props，請使用下列語法：

<Link to={{ pathname: path, query: queryObject, search: searchString }}>
  ...
</Link>

其中：

• pathname 是新視圖的路徑。
• query 是包含查詢參數的物件。
• search 是表示查詢字串，例如?foo=bar.

存取目標元件中的Props

在目標元件中，您可以存取透過使用以下技術進行連結：

withRouter 高階組件的過時用法：

• 用withRouter 包裝目標組件，它提供對匹配目標組件，它提供對匹配和位置屬性：

const NewView = withRouter(OriginalView);

使用鉤子的當前實現：

• 在功能組件中使用useParams 和useLocation 鉤子來存取匹配和位置屬性：

const NewView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();

  return (
    <div>
      {testvalue} {query.backUrl}
    </div>
  );
};

範例

考慮以下範例：

App.js：

<Link to={{ pathname: '/ideas/:testvalue', query: { testvalue: 'hello' } }}>Create Idea</Link>

const CreateIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // prints 'hello'

  return (
    <div>{testvalue}</div>
  );
};

CreateIdeaView.js:
• 在此範例中，按一下「建立創意」連結會將值為hello 的屬性testvalue 傳遞給CreateIdeaView 元件。
• 注意：

Link 元件中的路徑應包含參數佔位符，例如path: '/ideas/:testvalue'。 useParams 鉤子傳回一個包含路徑中定義的所有參數的物件。 useLocation 鉤子傳回一個包含目前位置資訊的對象，包括查詢和搜尋。 查詢是一個包含鍵值對的對象，而搜尋字串包含整個查詢字串。

以上是如何在 React-Router 的「Link」元件中傳遞 Props？的詳細內容。更多資訊請關注PHP中文網其他相關文章！