React-Router とリンクして Props を渡すにはどうすればよいですか?

Link React-Router で Props を渡す

React-Router の Link コンポーネントを使用すると、コンポーネント間でデータを渡すことができます。これを行うには、Link の to プロパティでパラメータを定義します。そのパラメータの値は、リンクされたコンポーネントで this.props.

Issue:

を使用してアクセスできます。

ルート パスが に欠落しているため、提供されたコードはリンクされたコンポーネントに props を渡すことができませんでした。定義。

解決策:

パス パラメータを に追加します。定義:

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

Location を使用したデータの受け渡し:

react-router v4/v5 を使用する場合、データは location オブジェクトを介して受け渡すことができます:

リンク (クエリ):

<Link to={{pathname: '/', query: {backUrl: 'theLinkData'}}} />

リンク (検索):

<Link to={{pathname: '/', search: '?backUrl=theLinkData'}} />

データへのアクセス (機能コンポーネント) ):

const CreatedIdeaView = () => {
  const { query, search } = useLocation();
  console.log(query.backUrl, new URLSearchParams(search).get('backUrl'));
};

データへのアクセス (クラス コンポーネント):

class CreateIdeaView extends React.Component {
  render() {
    console.log(this.props.location.query.backUrl);
    return <div>{this.props.location.query.backUrl}</div>;
  }
}

例:

class App extends React.Component {
  render() {
    return (
      <div>
        <Link to={{pathname: '/ideas', query: {foo: 'bar'}}} />
        <RouteHandler />
      </div>
    );
  }
}

class Ideas extends React.Component {
  render() {
    const { match, location } = this.props;
    console.log('props form link', this.props);
    return <p>{location.query.foo}</p>;
  }
}

以上がReact-Router とリンクして Props を渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。