Bagaimana untuk Menghantar Props dalam Pautan dengan React-Router?

Melalui Props dalam Link React-Router

Komponen Pautan React-Router membenarkan penghantaran data antara komponen. Untuk berbuat demikian, tentukan parameter dalam to prop Pautan dan nilai untuk parameter itu boleh diakses dalam komponen yang dipautkan menggunakan this.props.

Isu:

Kod yang disediakan gagal menghantar prop kepada komponen yang dipautkan kerana laluan laluan tiada daripada definisi.

Penyelesaian:

Tambah parameter laluan ke definisi:

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

Melalui Data menggunakan Lokasi:

Apabila menggunakan react-router v4/v5, data boleh dihantar melalui objek lokasi:

Pautan (Pertanyaan):

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

Pautan (Cari):

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

Mengakses Data (Komponen Fungsian ):

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

Mengakses Data (Komponen Kelas):

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

Contoh:

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>;
  }
}

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Props dalam Pautan dengan React-Router?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!