Πώς μπορώ να ορίσω μια διαδρομή στο αρχείο routes.jsx για να συλλάβω την τιμή της παραμέτρου __firebase_request_key
από μια διεύθυνση URL που παράγεται από το Twitter's single sign on process μετά την ανακατεύθυνση από τους διακομιστές τους;
http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
Δοκίμασα με την ακόλουθη διαμόρφωση των διαδρομών, αλλά το :redirectParam
δεν πιάνει την αναφερόμενη παράμετρο:
<Router>
<Route path="/" component={Main}>
<Route path="signin" component={SignIn}>
<Route path=":redirectParam" component={TwitterSsoButton} />
</Route>
</Route>
</Router>
React Router v3
Το React Router αναλύει ήδη την τοποθεσία για εσάς και την περνάει στο RouteComponent σας ως props. Μπορείτε να αποκτήσετε πρόσβαση στο τμήμα του ερωτήματος (μετά το ? στο url) μέσω του
this.props.location.query.__firebase_request_key
Αν ψάχνετε για τις τιμές των παραμέτρων της διαδρομής, χωρισμένες με άνω και κάτω τελεία (:) μέσα στο δρομολογητή, αυτές είναι προσβάσιμες μέσω
this.props.match.params.redirectParam
Αυτό ισχύει για καθυστερημένες εκδόσεις του React Router v3 (δεν είμαι σίγουρος για το ποιες). Παλαιότερες εκδόσεις δρομολογητών αναφέρθηκε ότι χρησιμοποιούσαν το this.props.params.redirectParam
.
React Router v4 και React Router v5
Το React Router v4 δεν αναλύει πλέον το ερώτημα για εσάς, αλλά μπορείτε να έχετε πρόσβαση σε αυτό μόνο μέσω του this.props.location.search
. Για τους λόγους δείτε την απάντηση του nbeuchat's.
Π.χ. με τη βιβλιοθήκη query-string που εισάγεται ως qs
θα μπορούσατε να κάνετε
qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key
Δείτε αυτή την απάντηση για περισσότερες ιδέες σχετικά με την ανάλυση της συμβολοσειράς αναζήτησης.
Επιπλέον, αν το στοιχείο σας δεν είναι άμεσο παιδί ενός Switch
θα πρέπει να χρησιμοποιήσετε το withRouter για να αποκτήσετε πρόσβαση σε οποιοδήποτε από τα props που παρέχει ο δρομολογητής.
Γενικά
Η πρόταση του nizam.sp's για να κάνετε
console.log(this.props)
θα είναι χρήσιμη σε κάθε περίπτωση.
μπορείτε να ελέγξετε το react-router, με απλά λόγια, μπορείτε να χρησιμοποιήσετε τον κώδικα για να λάβετε την παράμετρο ερωτήματος εφόσον έχετε ορίσει στο δρομολογητή σας:
this.props.params.userId
Το this.props.params.your_param_name
θα λειτουργήσει.
Αυτός είναι ο τρόπος για να λάβετε τις παραμέτρους από τη συμβολοσειρά του ερωτήματός σας.<br/>,
Παρακαλώ κάντε console.log(this.props);
για να εξερευνήσετε όλες τις δυνατότητες.