So erhalten Sie ein Schlüssel-Wert-Paar von der URL mit React-Router

Question

Der React-Router ist großartig, wenn wir nur einen Parameter in der URL haben, aber wenn es mehr als einen Parameter in URL gibt, wird es wanky !!! Zum Beispiel: Wenn die URL http://localhost:8080/foo=bar ist, dann kann ich fooValue = bar bekommen; Aber wenn die URL http://localhost:8080/foo=bar&this=that ist dann bekomme ich fooValue: "bar&this=that“.. wth !! Was bin ich hier ?!

var React = require('react'); 
var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var Main = require('./templates/main.jsx'); 
var Child = require('./templates/child.jsx'); 

module.exports = { 
    path: '/', 
    component: Main, 
    indexRoute: { component: Main }, 
    childRoutes: [ 
    { 
     path: '/foo=:fooValue', 
     component: child, 
     onEnter: function (nextState) { 
      console.log(nextState.params); 
      //// OUTPUTS: {fooValue : "bar"} 
     }, 
    }, 

    { 
     path: '/foo=:fooValue&this=:thisValue', 
     component: child, 
     onEnter: function (nextState) { 
      console.log(nextState.params); 
      //// OUTPUTS: {fooValue: "bar&this=that"} 

     }, 
    }, 

Gibt es eine Möglichkeit Schlüssel/Wert zu erhalten, {fooValue : "bar", thisValue : "that"}.

Answer 1

Sie sollten nicht gesetzt . Abfrage params in Pfadstruktur Sie werden als location Eigentum an Komponenten durch den Router übergeben, sie einfach durch Zugriff.

let { query } = this.props.location 
console.log(query); 

Werfen Sie einen Blick auf this example