Ich versuche, über meine Anwendung eine Router-Verbindung aufzubauen,
In diesem Szenario habe ich drei Dateien.
App.js
Book.js
DetailedView.js
Ich habe innerhalb von Buch eine aufgebaut <Link> das erscheint nur, wenn man mit der Maus darüber fährt (über einem Buchcover)
{this.state.isHovered ? (
<Link to={`/details/${this.props.book.industryIdentifiers[1].identifier}`}>
<div className="hover-box"></div>
</Link>) : ( <div /> )}
Dies bringt mich zu /details/12345 (isbn10-Nummer)
Das, was ich zum Beispiel schwer verstehe, ist, wie man das macht
setState({iPressedThisBook}) beim Drücken <Link> oder ob ich das Teil danach verwenden kann /12345 wie ein Filter zu erstellen
Weil in App das Route wird angeschlossen als…
<Route path="/details/:id" render={() => (
<BookDetailedView
bookStateUpdated = {this.bookStateUpdated}
book = {this.state.books}
/>
)}/>
Ich möchte später die greifen :id damit mache ich zum Beispiel a this.props.book.find(:id) in meinem <BookDetailedView>
Um den Pfadparameter in Ihrer Komponente zu erhalten, müssen Sie Ihre Komponente zuerst mit verbinden withRouter HOC aus react-router damit Sie auf die Router-Requisiten zugreifen und den Pfad erhalten können params von dem match Requisiten als this.props.match.params.id
Beispielcode:
import {withRouter} from 'react-router';
class BookDetailedView extends React.Component {
render() {
var id = this.props.match.params.id
}
}
export default withRouter(BookDetailedView) ;
oder einfach mit render prop in route as weitergeben
<Route path="/details/:id" render={({match}) => (
<BookDetailedView
bookStateUpdated = {this.bookStateUpdated}
book = {this.state.books}
id={match.params.id}
/>
)}/>
Aus der React-Dokumentation von match
Spiel
Ein Übereinstimmungsobjekt enthält Informationen darüber, wie a <Route path> stimmte mit der URL überein. match Objekte enthalten die folgenden Eigenschaften:
- params – (Objekt) Schlüssel/Wert-Paare, die von der URL analysiert werden, die den dynamischen Segmenten des Pfads entspricht
- isExact – (boolean) true, wenn die gesamte URL abgeglichen wurde (keine nachgestellten Zeichen)
- path – (string) Das für den Abgleich verwendete Pfadmuster. Nützlich zum Erstellen von verschachtelten s
- url – (Zeichenfolge) Der übereinstimmende Teil der URL. Nützlich zum Erstellen von verschachtelten s
Sie haben an verschiedenen Stellen Zugriff auf Match-Objekte:
- Routenkomponente als
this.props.match
- Route render as ({ match }) => ()
- Leiten Sie untergeordnete Elemente als ({ match }) => () weiter
- withRouter als this.props.match
- matchPath als Rückgabewert
Wenn eine Route keinen Pfad hat und daher immer übereinstimmt, erhalten Sie die nächste übergeordnete Übereinstimmung. Gleiches gilt für withRouter
Sie können auf :id zugreifen, indem Sie this.props.params.id ausführen
Sie können das Routing auf viele Arten handhaben, Sie müssen es nicht tun, Sie können es auch in einer Funktion handhaben.
function doSomethingWhenClicked(id)
{
doSomething();
this.props.history.push({
pathname: '/example/'+id
});
}
und binden Sie diese Funktion an ein onclick-Element
.
