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

реагировать маршрутизатор 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 маршрутизатор 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'}

реагировать маршрутизатор v4

с маршрутизатором React 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);

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

Реагировать Команда маршрутизатора rational для удаления query свойства:

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

[...]

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

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

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

this.props.params.userId

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

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

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

this.props.match.params.id

реагировать маршрутизатор 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.your_param_name будет работать.

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

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

React router начиная с v4 больше не дает вам query params непосредственно в location "объект". Причина в том

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

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

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

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

this.props.location.state.from.search

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

в 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

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

требования

react-router-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'

для консоли.журнал(это.реквизит) вы могли бы то, что было передано вниз. Получайте удовольствие!

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

вы можете увидеть запрос с помощью:

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

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

}

---

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

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

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