Парсинг строки запроса
В прошлых темах использовались параметры маршрута, которые извлекались из запрошенного адреса url. Но кроме параметров маршрута приложение на React также может извлекать данные из строки запроса. Строка запроса - эта та часть адреса, которая идет в запрошенном адресе после вопросительного знака, например:
http://localhost:3000/2/?name=Bob&age=23
Здесь часть "?name=Bob&age=23" как раз является строкой запроса, которая содержит два параметра. Строка запроса представляет
набор пааметров в виде ключ=значение, которые разделяются друг от друга знаком амперсанда - &. Например, выше в строке запроса указаны два параметра:
name и age. Параметр name имеет значение "Bob", а параметр age - значение 23.
Для получения параметров строки запроса в react-router v6 имеется функция-хук useSearchParams(). Рассмотрим ее применение и для этого определим следующую веб-страницу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Маршруты в React</title>
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/history@5/umd/history.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-router@6.3.0/umd/react-router.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-router-dom@6.3.0/umd/react-router-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const Router = ReactRouterDOM.BrowserRouter;
const Route = ReactRouterDOM.Route;
const Routes = ReactRouterDOM.Routes;
const Link = ReactRouterDOM.Link;
const useSearchParams = ReactRouterDOM.useSearchParams;
const useParams = ReactRouterDOM.useParams;
function Home(){
// получаем параметры маршрута
const params = useParams();
// получаем параметры строки запроса
const [searchParams, setSearchParams] = useSearchParams();
return <div>
<h2>Главная</h2>
<p>Id: {params.id}</p>
<p>Name: {searchParams.get("name")}</p>
<p>Age: {searchParams.get("age")}</p>
</div>;
}
ReactDOM.createRoot(
document.getElementById("app")
)
.render(
<Router>
<div>
<nav>
<Link to="/2/?name=Bob&age=23">Bob</Link> |
<Link to="/3/?name=Tim&age=33">Tim</Link>
</nav>
<Routes>
<Route path="/:id" element={<Home />} />
</Routes>
</div>
</Router>
);
</script>
</body>
</html>
Для демонстрации парсинга строки запроса здесь используется только один компонент. Для маршрута компонента определен один параметр id.
Для тестирования определены две ссылки с помощью компонента Link, которые содержат как параметры маршрута - пааметр id, так и параметры строки запроса - параметры name и age:
<Link to="/2/?name=Bob&age=23">Bob</Link> | <Link to="/3/?name=Tim&age=33">Tim</Link>
Параметр маршрута получаем через хук useParams():
const params = useParams();
..............
<p>Id: {params.id}</p>
Для получения параметров строки запроса получаем функция-хук useSearchParams:
const useSearchParams = ReactRouterDOM.useSearchParams;
Затем обращаемся к ней:
const [searchParams, setSearchParams] = useSearchParams();
Из нее мы можем получить два объекта. Объект searchParams - по сути объект URLSearchParams, который доступен в стандартном коде JavaScript и который позволяет получить из строки запроса параметры и управлять ими. И объект setSearchParams - функция изменения объекта searchParams.
Используя функции get через searchParams можно получить параметры name и age:
<p>Name: {searchParams.get("name")}</p>
<p>Age: {searchParams.get("age")}</p>
Таким образом, мы можем работать с двумя типами параметров, как с параметрами маршрута, которые определяются непосредственно в маршруте, так и с параметрами строки запроса.
- Глава 1. Введение в React
- Глава 2. Основы React
- Глава 3. Состояние. Управление компонентами-классами
- Глава 4. Хуки. Управление функциональными компонентами
- Глава 5. Маршрутизация
- Глава 6. Flux и Redux
- Глава 7. Дополнительные статьи