如何在 React Router 中將 Props 傳遞給新視圖？

在Link React-Router 中傳遞Props

問題：

在React-Router 應用程式中，Link 元件是儘管屬性包含在連結的參數中，但不將屬性傳遞給新視圖。

解決方案：

過時的程式碼（v1）：

<link to="ideas" params="{{" testvalue:>

<route name="ideas" handler="{CreateIdeaView}"></route>

最新程式碼（v4 /v5）：

// Using query
<link to="{{" pathname: query: backurl>

// Using search
<link to="{{" pathname: search:>

<route name="ideas" path="/:testvalue" handler="{CreateIdeaView}"></route>

用法：

• 的to 屬性接受具有下列屬性的物件：

  • pathname：新視圖的路徑。
  • params：包含要傳遞給新視圖的屬性的物件。
• Route 元件必須具有與 to 屬性中的動態參數值相符的 path 屬性。

功能組件範例：

<code class="js">const CreatedIdeaView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();
  console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'));
  return <span>{testvalue} {backurl}</span>;
};</code>

注意：上面的程式碼使用了來自react-router-dom的鉤子。

更新的程式碼範例：

<code class="js">const App = () => {
  return (
    <react.fragment>
      <link to="{{" pathname: itemid: item: okay:>Ideas
      <switch>
        <route exact path="/ideas/:itemID/" component="{Ideas}"></route>
        <route path="/hello/:WORLD?/:thing?" component="{World}"></route>
      </switch>
    </react.fragment>
  );
};</code>

以上是如何在 React Router 中將 Props 傳遞給新視圖？的詳細內容。更多資訊請關注PHP中文網其他相關文章！