Как получить параметры запроса и параметры URL в React

Прежде чем перейти к примерам, сначала разберемся, в чем разница между параметрами запроса и параметрами URL:

Рассмотрим URL: https://example.com/search?term=pizza.

Здесь term — это параметр запроса (или параметр поиска), который имеет значение pizza. Параметры URL отображаются в виде пар ключ-значение.

Что же такое параметры URL? Параметры URL — это те, которые появляются перед ? в URL.

https://example.com/orders/10001

В приведенном выше URL 10001 является параметром URL. В параметрах URL нет явного упоминания ключа, к которому относится значение. Код должен сам решить, что представляет собой 10001, основываясь на позиции или формате URL. Конечно, когда мы читаем URL как человек, мы поймем, что они представляют orderId.

Чтение параметров запроса

Мы можем получить часть запроса URL с помощью location.search.
То есть, если я нахожусь на странице https://example.com/search?term=pizza&location=Bangalore, то вызов location.search вернет ?term=pizza&location=Bangalore.

Но как извлечь из этого пары ключ-значение? Именно тогда на помощь приходит URLSearchParams.

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

URLSearchParams помогает в разборе и доступе к параметрам запроса.
Мы можем использовать следующий код для получения значения term:

const queryParams = new URLSearchParams("?term=pizza&location=Bangalore")
const term = queryParams.get("term")
console.log(term) //pizza

Мы можем перебирать параметры запроса, как показано в приведенном ниже коде:

const queryParams = new URLSearchParams("?term=pizza&location=Bangalore")
for (const [key, value] of queryParams) {
  console.log({ key, value }) // {key: 'term', value: 'pizza'} {key: 'location', value: 'Bangalore'}
}

Мы можем использовать это в компоненте react, как показано ниже:

function App() {
  const queryParams = new URLSearchParams(window.location.search)
  const term = queryParams.get("term")
  const location = queryParams.get("location")

  return (
    <div className="App">
      <p>Value of term: {term}</p>
      <p>Value of location: {location}</p>
    </div>
  )
}

export default App

Теперь, если вы откроете http://localhost:3000/?term=pizza&location=Bangalore, вы увидите отображение термина и местоположения:

Использование пакета query-params

Мы можем использовать библиотеку query-string для достижения той же цели. Сначала установите query-string с помощью следующей команды (или npm i query-string):

yarn add query-string

Мы можем использовать его в React, как показано ниже:

import queryString from "query-string"

function App() {
  const queryParams = queryString.parse(window.location.search)

  return (
    <div className="App">
      <p>Value of term: {queryParams.term}</p>
      <p>
        All query params <pre>{JSON.stringify(queryParams, null, 2)}</pre>
      </p>
    </div>
  )
}

export default App

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

Преимущество использования query-string в том, что он возвращает объект JavaScript и имеет дополнительные возможности.

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

Если вы используете React Router для маршрутизации в вашем приложении, то вы можете использовать хук useSearchParams.

Сначала установите React Router в свой проект с помощью следующей команды:

yarn add history@5 react-router-dom@6

В index.js импортируйте компонент BrowserRouter и оберните его вокруг компонента App:

import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
)

Создайте компонент Search со следующим кодом:

import React from "react"
import { useSearchParams } from "react-router-dom"

const Search = () => {
  let [searchParams, setSearchParams] = useSearchParams()
  const term = searchParams.get("term")
  const location = searchParams.get("location")

  return (
    <div className="App">
      <p>Value of term: {term}</p>
      <p>Value of location: {location}</p>
    </div>
  )
}

export default Search

Здесь мы используем useSearchParams для получения параметров запроса. Способ доступа к параметрам поиска такой же, как и у URLSearchParams, потому что useSearchParams внутренне использует URLSearchParams.

Наконец, в App.js создайте маршрут для компонента Search.

import { Routes, Route } from "react-router-dom"
import Search from "./Search"

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="search" element={<Search />} />
      </Routes>
    </div>
  )
}

export default App

Теперь, если вы откроете http://localhost:3000/search?term=pizza&location=Bangalore, вы увидите выведенные параметры поиска:

Вы можете узнать больше о react router в моей предыдущей статье

Чтение параметров URL

Поскольку в параметре URL не указаны явные ключи, нам придется использовать библиотеки типа react router для доступа к ним. Мы можем использовать хук useParams для доступа к параметрам URL.

Создайте компонент Order в вашем проекте, который использует react router.

import { useParams } from "react-router-dom"

export default function Order() {
  let params = useParams()
  return <h2>Order: {params.orderId}</h2>
}

Теперь обновите определение маршрута с помощью маршрута order/:orderId:

import { Routes, Route } from "react-router-dom"
import Order from "./Order"

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="order/:orderId" element={<Order />} />
      </Routes>
    </div>
  )
}

export default App

Обратите внимание, что :orderId в определении маршрута и orderId в params.orderId должны совпадать.

Теперь, если вы откроете http://localhost:3000/order/10001, вы увидите, что отображается идентификатор заказа:

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