So übergeben Sie Daten von einer Seite an eine andere Seite mit React Router

Bitte, ich brauche Hilfe bei React-Router-Dom, ich bin neu in der Bibliothek und kann seitdem anscheinend jede Lösung finden. Ich erhalte drei Ergebnisse von einem API-Aufruf, in dem ich die Daten abbilde, um sie auf der Benutzeroberfläche zu rendern. Jetzt brauche ich Folgendes: Wenn ich auf eine Zeile in einer dieser Listen klicke, möchte ich, dass sie mich zu a führt Bildschirm, der nur die Details der einzelnen Sache zeigt, auf die ich geklickt habe.

import React, { Component } from "react";

export default class User extends Component {
  state = { userDetails: "" };

  componentDidMount() {
    axios.get(`https://urlforapi.com`)
    .then(({ data }) => {
      this.setState({
        userDetails: data
      });
    });
  }

  render() {
    const { userDetails } = this.state;
    return (
      <div>
        {userDetails
          ? userDetails.map(info => {
              return (
                <Link to="/home/userDetails">
                  <div key={info.id}>
                    <p>{info.name}</p>
                  </div>
                  <div>
                    <p>{info.age}</p>
                  </div>
                  <div>
                    <p>{info.description}</p>
                  </div>
                </Link>
              );
            })
          : null}
      </div>
    );
  }
}

Option 1: Routenstatus übergeben

Senden Sie den Status im Routenübergang.

• Verwenden react-router-dom v5

Sie können einen Status übergeben, der für den zugeordneten Eintrag eindeutig ist, wie z info.id zusammen mit dem Routen-Push, der passiert, wenn auf den Link geklickt wird. Dadurch werden die Daten des Benutzers verschleiert, da Sie keine Informationen an die Benutzeroberfläche (dh den Browser) weitergeben.

<Link
  to={{
    pathname: '/home/userDetails',
    state: {
      infoId: info.id,
    },
  }}
>

• Verwenden react-router-dom v6

Die Link-API hat sich in v6 ein wenig geändert, die state ist jetzt eine Stütze.

<Link
  to='/home/userDetails'
  state={
    infoId: info.id,
  }
>

Sie können dann den Zustand aus dem entpacken location prop/object auf der Komponente, die von dieser Route zurückgegeben wird. Verwenden Sie Wächter, falls ein Benutzer zu navigiert hat '/home/userDetails' von woanders, wie state kann undefiniert sein.

Falls Route Requisiten bestanden:

props.location && props.location.state && props.location.state.infoId

oder

props.location?.state?.infoId

Wenn Sie Funktionskomponenten verwenden, können Sie auch die verwenden useLocation Haken reagieren:

const { state: { infoId } = {} } = useLocation();

Option 2: Übergeben Sie etwas in der URL

<Link to={`/home/userDetails/${info.id}`>

Und rufen Sie den Parameter aus der ab match prop in der zurückgegebenen Routenkomponente. Wenn die Route zum Beispiel so aussieht:

<Route path="/home/userDetails/:infoId" component={... } />

Dann in der Komponente get id:

props.match.params.infoId

Und im Fall von Funktionskomponenten die useParams Haken reagieren:

const { infoId } = useParams();

Der Benutzer kann dies sehen, aber Sie müssen das Schutzmuster nicht verwenden, um darauf zuzugreifen, da es per Definition durch die Route definiert wird (obwohl infoID kann immer noch definiert werden, wenn der Benutzer eine ungültige ID eingibt).

• Link zu
• Lage
• Spiel
• useLocation
• useParams

Sie können die Pfadparameteroption von verwenden react-router-dom .

Beispiel

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Topic from '../topic'

export default function App() {
  return (
    <Router>
      <div>
        <Route path="/topic/:name" component={Topic} />
      </div>
    </Router>
  );
}

Übergeben Sie die Parameter:

import React, { Component } from "react";
import { Link } from 'react-router-dom'

export default class Topics extends Component {
  render() {
    return <Link to="/topic/someTopicName">Some Topic</Link>;
  }
}

Greifen Sie auf Router-Parameter in der Komponente zu

import React from 'react'

export default function Topic(props) {
  return <h1>{props.match.params.name}</h1>
}

So können Sie Daten an die navigierte Komponente übergeben

<Link
  to={{
    pathname: '/home/userDetails',
    state: {infoId: info.id},
  }}
>

Und greifen Sie so in der navigierten Komponente zu

wenn es sich um eine klassenbasierte Komponente handelt.

this.props.location.state

wenn es sich um eine funktionale Komponente handelt

props.location.state

Wenn Sie die Funktionskomponente in Ihrer Reaktionsanwendung verwenden. Sie können die folgenden Schritte ausführen

Hauptseite:

<Link
  to={{
    pathname: '/your/path',
    state: { 
       data: "your data"
    },
  }}
>

Auf Ihrer untergeordneten Seite oder Seite, die Sie weiterleiten möchten:

Verwenden Sie den Hook useLocation (Version 5.+).

const emp = useLocation()

console.log(emp)

Ausgabe

{ 
   state: { 
       data: "your data" 
   } 
}