React Router の新しいビューにプロップを渡すにはどうすればよいですか?

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 の新しいビューにプロップを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。