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

在Link React-Router 中傳遞Props

問題：

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

解決方案：

過時的程式碼（v1）：

<Link to="ideas" params={{ testvalue: "hello" }}></Link>

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

最新程式碼（v4 /v5）：

// Using query
<Link to={{ pathname: `/${this.props.testvalue}`, query: { backUrl } }} />

// Using search
<Link to={{ pathname: `/${this.props.testvalue}`, search: `?backUrl=${backUrl}` }} />

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

用法：

• 的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: '/ideas/:itemID', itemID: 222, item: { okay: 123 } }}>Ideas</Link>
      <Switch>
        <Route exact path="/ideas/:itemID/" component={Ideas} />
        <Route path="/hello/:WORLD?/:thing?" component={World} />
      </Switch>
    </React.Fragment>
  );
};</code>

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