2017-04-30 3 views
1

Stellen Sie sich vor, ich wollte eine Webanwendung mit React wie Instagram erstellen, auf der Benutzer Bilder hinzufügen können. Jedes Bild hinzugefügt wird dann zu einer einzigen URL verbunden sind, wie diese:Können wir dynamisch Links mit React JS erstellen?

https://www.instagram.com/p/BTg4ZopggE9

Wie können wir das tun?

Ich weiß, dass es dieses Modul 'React-Router' gibt, aber soweit ich weiß, funktioniert es nur mit einem vordefinierten Satz von Routen, die der Programmierer fest codiert hat (Die URLs können nicht dynamisch erstellt werden).

+1

Sie können Parameter an Routen übergeben, wie '/ p /: image_id' wobei image_id eine Variable ist –

+0

https://reacttraining.com/reac-router/web/example/url-params ist der * zweite * Link in die Dokumentation. – Quentin

Antwort

2

Obwohl es stimmt, dass die Routen in react-router vordefiniert sind, können die Parameter dynamisch sein. Zum Beispiel können Sie eine Route wie /images/:imageId haben, ImageId wäre nichts anderes als ein Variablenname für die Image-ID. Wenn ein Benutzer dort navigieren würde, würde er die URL wie folgt sehen: /images/12ert56 oder so ähnlich. Dann liest die Komponente, zu der sie weitergeleitet wurden, die Bild-ID aus dem Parameter durch Aufrufen von this.props.params.imageId und dann zeigt die Komponente ihnen das entsprechende Bild an.

Verwandte Themen