Как получить значение параметра из строки запроса

Как я могу определить маршрут в файле routes.jsx для захвата значения параметра __firebase_request_key из URL-адреса, сгенерированного после однократного входа в Twitter после перенаправления с их серверов?

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>

ОТВЕТЫ

Ответ 1

React Router v3

React Router уже анализирует местоположение и передает его вашему RouteComponent в качестве реквизита. Вы можете получить доступ к части запроса (после? В 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. По причинам см. Нбеучат ответ.

Например, с библиотекой строк запроса, импортированной как qs вы можете сделать

qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

Посмотрите этот ответ, чтобы узнать больше о разборе строки поиска.

Кроме того, если ваш компонент не является прямым потомком Switch вам необходимо использовать withRouter для доступа к любому из реквизитов, предоставленных маршрутизатором.

генеральный

низам.сп предложение сделать

console.log(this.props)

будет полезно в любом случае.

Ответ 2

React Router v4

Использование component

<Route path="/users/:id" component={UserPage}/> 


this.props.match.params.id

Компонент автоматически отображается с помощью реквизитов маршрута.


Использование render

<Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 


this.props.match.params.id

Маршрутные реквизиты передаются в функцию рендеринга.

Ответ 3

React Router v3

С помощью React Router v3 вы можете получить строку запроса из this.props.location.search (? Qs1 = naisarg & qs2 = parmar). Например, let params = queryString.parse(this.props.location.search) даст { qs1: 'naisarg', qs2: 'parmar'}

React Router v4

В React Router v4 this.props.location.query больше не существует. Вместо этого вам нужно использовать this.props.location.search и проанализировать параметры запроса самостоятельно или с помощью существующего пакета, такого как query-string.

пример

Вот минимальный пример использования React Router v4 и библиотеки query-string.

import { withRouter } from 'react-router-dom';
import queryString from 'query-string';

class ActivateAccount extends Component{
    someFunction(){
        let params = queryString.parse(this.props.location.search)
        ...
    }
    ...
}
export default withRouter(ActivateAccount);

рациональный

Команда React Router, рационально query свойство query:

Существует ряд популярных пакетов, которые выполняют синтаксический разбор/строковую обработку запроса немного по-разному, и каждое из этих различий может быть "правильным" способом для одних пользователей и "неправильным" для других. Если бы React Router выбрал "правильный", он был бы правильным только для некоторых людей. Затем необходимо добавить способ, которым другие пользователи могут заменять свои предпочтительные пакеты для разбора запросов. React Router не использует внутреннюю строку поиска, которая требует, чтобы она анализировала пары ключ-значение, поэтому нет необходимости выбирать, какая из них должна быть "правильной".

[...]

Подход, принятый для 4.0, состоит в том, чтобы убрать все функции типа "включенные батареи" и вернуться к простой базовой маршрутизации. Если вам нужен синтаксический анализ строки запроса или асинхронная загрузка, интеграция с Redux или что-то еще очень специфичное, то вы можете добавить это в библиотеку специально для вашего случая использования. Меньше лишних вещей упаковано в то, что вам не нужно, и вы можете настроить вещи в соответствии с вашими предпочтениями и потребностями.

Вы можете найти полное обсуждение на GitHub.

Ответ 4

React Router v4 больше не имеет props.location.query объект (см. github обсуждение). Таким образом, принятый ответ не будет работать для более новых проектов.

Решение для v4 заключается в использовании внешней библиотеки query-string для анализа props.location.search

const qs = require('query-string');
//or
import * as qs from 'query-string';

console.log(location.search);
//=> '?foo=bar'

const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}

Ответ 5

Насколько я знаю, есть три способа сделать это.

1. использовать регулярное выражение для получения строки запроса.

2.Вы можете использовать браузер API. image текущий URL выглядит так:

http://www.google.com.au?token=123

мы просто хотим получить 123;

Первый

 const query = new URLSearchParams(this.props.location.search);

затем

const token = query.get('token')
console.log(token)//123

3. использовать третью библиотеку под названием "строка запроса". Сначала установите его

npm i query-string

Затем импортируйте его в текущий файл JavaScript:

 import queryString from 'query-string'

Следующим шагом является получение "токена" в текущем URL, сделайте следующее:

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123

Надеюсь, поможет.

Обновлено 25/02/2019

  1. если текущий URL выглядит следующим образом:

http://www.google.com.au?app=home&act=article&aid=160990

мы определяем функцию для получения параметров:

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}

Мы можем получить "помощь":

getQueryVariable('aid') //160990

Ответ 6

вы можете проверить react-router, просто, вы можете использовать код для получения параметра запроса до тех пор, пока вы определили в своем маршрутизаторе:

this.props.params.userId

Ответ 8

Если ваш маршрутизатор подобен этому

<Route exact path="/category/:id" component={ProductList}/>

Вы получите этот id, подобный этому

this.props.match.params.id

Ответ 9

this.props.params.your_param_name будет работать.

Это способ получить параметры из строки запроса.
Прошу console.log(this.props); изучить все возможности.

Ответ 10

React router from v4 on уже не дает вам параметры query params непосредственно в его объекте location. Причина в том, что

Существует несколько популярных пакетов, которые выполняют разбор/строчку строки запроса немного по-разному, и каждый из этих различий может быть "правильным" способом для некоторых пользователей и "неправильным" для других. Если React Router выбрал "правильный", это было бы правильно для некоторых людей. Затем ему нужно будет добавить способ для других пользователей заменить их в предпочтительном пакете синтаксического анализа запросов. Внутреннее использование строки поиска с помощью React Router не требует, чтобы он разбирал пары ключ-значение, поэтому нет необходимости выбирать, какой из них должен быть "правильным".

Включив это, было бы просто разумнее просто проанализировать location.search в ваших компонентах вида, ожидающих объект запроса.

Вы можете сделать это в общих чертах, переопределив параметр withRouter от react-router

customWithRouter.js

import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';

const propsWithQuery = withPropsOnChange(
    ['location', 'match'],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)

Ответ 11

Если вы не получаете this.props... вы ожидали, основываясь на других ответах, вам может потребоваться использовать withRouter (docs v4):

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux terminology) to the router.  
const TwitterSsoButton = withRouter(ShowTheLocation)  

// This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))

// This does not
connect(...)(withRouter(MyComponent))

Ответ 12

Мне было трудно решить эту проблему. Если ни одна из вышеперечисленных задач вы не можете попробовать. Я использую приложение create-react-app

Требования

реакция-маршрутизатор-dom ":" ^ 4.3.1 "

Решение

В месте, где указан маршрутизатор

<Route path="some/path" ..../>

Добавьте имя параметра, которое вы хотите передать таким образом

<Route path="some/path/:id" .../>

На странице, где вы показываете некоторый/путь, вы можете указать это, чтобы просмотреть идентификатор вызова имени параметра, как это

componentDidMount(){
  console.log(this.props);
  console.log(this.props.match.params.id);
}

В конце, где вы экспортируете дефолт

export default withRouter(Component);

Не забудьте включить импорт

import { withRouter } from 'react-router-dom'

Когда console.log(this.props) вы сможете передать то, что было передано. Повеселись!

Ответ 13

componentDidMount(){
    //http://localhost:3000/service/anas
    //<Route path="/service/:serviceName" component={Service} />
    const {params} =this.props.match;
    this.setState({ 
        title: params.serviceName ,
        content: data.Content
    })
}

Ответ 14

В компоненте, где вам нужно получить доступ к параметрам, вы можете использовать

this.props.location.state.from.search

который покажет всю строку запроса (все после знака ?)

Ответ 15

В React Router v4 только с Route является правильным способом

Вы можете получить доступ к свойствам объектов истории и ближайшему совпадению с помощью компонента более высокого порядка с Router. withRouter будет передавать обновленные сопоставления, местоположения и истории реквизита упакованному компоненту всякий раз, когда он отображает.

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

https://reacttraining.com/react-router/web/api/withRouter

Ответ 16

Я использовал внешний пакет под названием query-string для синтаксического анализа параметров url.

import React, {Component} from 'react'
import { parse } from 'query-string';

resetPass() {
    const {password} = this.state;
    this.setState({fetching: true, error: undefined});
    const query = parse(location.search);
    return fetch(settings.urls.update_password, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': query.token},
        mode: 'cors',
        body: JSON.stringify({password})
    })
        .then(response=>response.json())
        .then(json=>{
            if (json.error)
                throw Error(json.error.message || 'Unknown fetch error');
            this.setState({fetching: false, error: undefined, changePassword: true});
        })
        .catch(error=>this.setState({fetching: false, error: error.message}));
}

Ответ 17

let data = new FormData();
data.append('file', values.file);

Ответ 18

Может быть, немного поздно, но эта ловушка реагирования может помочь вам получить/установить значения в запросе URL: https://github.com/rudyhuynh/use-url-search-params (написано мной).

Работает с или без react-router. Ниже приведен пример кода в вашем случае:

import React from "react";
import { useUrlSearchParams } from "use-url-search-params";

const MyComponent = () => {
  const [params, setParams] = useUrlSearchParams()
  return (
    <div>
      __firebase_request_key: {params.__firebase_request_key}
    </div>
  )
}

Ответ 19

Вы можете увидеть запрос, используя:

console.log(this.props.location.query)

Ответ 20

export class ClassName extends Component{
      constructor(props){
        super(props);
        this.state = {
          id:parseInt(props.match.params.id,10)
        }
    }
     render(){
        return(
          //Code
          {this.state.id}
        );
}

Ответ 21

самое простое решение!

в маршрутизации:

   <Route path="/app/someUrl/:id" exact component={binder} />

в коде реакции:

componentDidMount() {
    var id = window.location.href.split('/')[window.location.href.split('/').length - 1];
    var queryString = "http://url/api/controller/" + id
    $.getJSON(queryString)
      .then(res => {
        this.setState({ data: res });
      });
  }