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

Как я могу определить маршрут в моем файле rout.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>

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. По причинам см . Ответ nbeuchat .

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

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

Другой библиотекой будет строка запроса . Посмотрите этот ответ, чтобы узнать больше о разборе строки поиска. Если вам не нужна IE-совместимость, вы также можете использовать

new URLSearchParams(this.props.location.search).get("__firebase_request_key")

Для функциональных компонентов вы бы заменили this.props.locationна ловушку useLocation . Обратите внимание, что вы можете использовать window.location.search, но это не позволит запускать рендеринг React при изменениях. Если ваш (нефункциональный) компонент не является прямым потомком, Switchвам нужно использовать withRouter для доступа к любому из реквизитов, предоставленных маршрутизатором.

генеральный

предложение nizam.sp сделать

console.log(this.props)

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

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

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

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объекта:

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

[...]

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

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

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

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

4. если текущий 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

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

Решением для v4 является использование внешней строки запроса библиотеки для анализа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'}

При использовании React-хуков нет доступа к доступу this.props.location. Для захвата параметров URL используйте windowобъект.

const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');

React Router v4

const urlParams = new URLSearchParams(this.props.location.search)
const key = urlParams.get('__firebase_request_key')

Пожалуйста, обратите внимание, что это в настоящее время экспериментально.

Проверьте совместимость браузера здесь: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

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

this.props.params.userId

React Router 5.1+

5.1 введены различные крючки, такие как useLocationиuseParams которые могут быть здесь полезны.

Пример:

<Route path="/test/:slug" component={Dashboard} />

Тогда, если мы посетили сказать

http://localhost:3000/test/signin?_k=v9ifuf&__firebase_request_key=blablabla

Вы можете получить это как

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

const Dashboard: React.FC = React.memo((props) => {
    const location = useLocation();

    console.log(queryString.parse(location.search));

    // {__firebase_request_key: "blablabla", _k: "v9ifuf"}

    ...

    return <p>Example</p>;
}

Если ваш роутер такой

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

Вы получите этот идентификатор, как это

this.props.match.params.id

С этим однострочником вы можете использовать его в любом месте как React Hook, так и React Class Component с простым JavaScript.

https://www.hunterisgod.com/?city=Leipzig

let city = (new URLSearchParams(window.location.search)).get("city")

Если вы не получаете 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))

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

Требования

response-router-dom ":" ^ 4.3.1 "

Решение

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

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

Добавьте имя параметра, который вы хотите передать следующим образом

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

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

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) вы сможете получить то, что было передано. Радоваться, веселиться!

React routerс v4 и далее больше не дает вам 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)

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
    })
}

Может быть, немного поздно, но этот хук реакции может помочь вам получить / установить значения в запросе 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>
  )
}

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

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

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

this.props.location.state.from.search

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

Скажи, что есть URL-адрес следующим образом

HTTP: // локальный: 3000 / обратного вызова код = 6c3c9b39-de2f-3bf4-a542-3e77a64d3341

Если мы хотим извлечь код из этого URL, будет работать следующий метод.

const authResult = new URLSearchParams(window.location.search); 
const code = authResult.get('code')

В React Router v4 только withRoute - это правильный путь

Вы можете получить доступ к свойствам объекта истории и совпадению ближайшего с помощью компонента высшего порядка withRouter. 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

Я использовал внешний пакет с именем 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}));
}

Когда вы работаете с реагирующим маршрутом, dom затем будет очищать объект с помощью for match, но если вы выполните следующий код, то это будет для компонента es6, так же как и для компонента функции напрямую.

import { Switch, Route, Link } from "react-router-dom";

<Route path="/profile" exact component={SelectProfile} />
<Route
  path="/profile/:profileId"
  render={props => {
    return <Profile {...props} loading={this.state.loading} />;
  }}
/>
</Switch>
</div>

Таким образом, вы можете получить реквизит и сопоставить параметры и идентификатор профиля

Это сработало для меня после долгих исследований компонента es6.

Или, может быть, что-то подобное?

let win = {
  'location': {
    'path': 'http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla'
  }
}
if (win.location.path.match('__firebase_request_key').length) {
  let key = win.location.path.split('__firebase_request_key=')[1]
  console.log(key)
}

Вы можете создать простой хук для извлечения параметров поиска из текущего местоположения:

import React from 'react';
import { useLocation } from 'react-router-dom';

export function useSearchParams<ParamNames extends string[]>(...parameterNames: ParamNames): Record<ParamNames[number], string | null> {
    const { search } = useLocation();
    return React.useMemo(() => { // recalculate only when 'search' or arguments changed
        const searchParams = new URLSearchParams(search);
        return parameterNames.reduce((accumulator, parameterName: ParamNames[number]) => {
            accumulator[ parameterName ] = searchParams.get(parameterName);
            return accumulator;
        }, {} as Record<ParamNames[number], string | null>);
    }, [ search, parameterNames.join(',') ]); // join for sake of reducing array of strings to simple, comparable string
}

тогда вы можете использовать его внутри своего функционального компонента следующим образом:

// current url: http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
const { __firebase_request_key } = useSearchParams('__firebase_request_key');

// current url: http://localhost:3000/home?b=value
const searchParams = useSearchParameters('a', 'b'); // {a: null, b: 'value'}

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

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

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

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

   <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 });
      });
  }