Как вызвать функцию(обработчик) в компоненте при изменении url React?

Question

[Shurik]

Здравствуйте. Суть вопроса такова. Написал компонент пагинации, который выводит по определенной логике номера страниц. При клике по этим номерам к url добавляется "?page={№страницы}" и подставляется в . Данный компонент является дочерним к тому компонентту-родителю, где получаются данные, к которым и надо провести пагинацию.
Итак, как сделать так, чтобы при добавлении\изменении к url "?page={№страницы}" делался повторный запрос в компоненте-родителе функции, которая будет запрашивать на сервере выобрку в зависимости от номера страницы?

P.S. для маршрутизации использую React Router
На vue router, кстати, подобная функциональность реализована навигационным хуком beforeRouteUpdate. Есть ли что-либо подобное в React?

Answer 1

[Александр]

https://reactrouter.com/en/main/hooks/use-search-params

Comments

[Shurik]

Смотрел на этот хук. Но мне показалось, судя по примеру на его странице, что его надо применять там, где я меняю url, а в моем случае это дочерний Pagination. Мне же надо отреагировать на смену url в родительском компоненте.
Если я ошибаюсь - поправьте пожалуйста в двух словах хотя бы на пальцах. Только начал осваивать реакт. Возможно ещё не до конца понимаю когда происходит ререндинг компонентов и другие процессы.

[Александр]

Shurik, можете использовать его в родительском.

[Shurik]

Александр, хорошо. Попробую чуть попозже, как за компом буду. Если не возражаете, то возможно помучаю вас ещё парой вопросов, если что-то получаться не будет))

[Shurik]

Александр, все получилось. Спасибо. Только вот единственное не до конца понимаю как работает это изнутри. Был бы благодарен, если бы объяснили в двух словах, что происходит с момента как в дочернем Pagination добавляю к url параметры. Код в родительском:

var page = searchParams.get('page');

    useEffect(()=>{
        axios.get('/get-list', {params: {page: page}})
            .then(res=>{
                setList(res.data);
                setCurrentPage(+res.headers['x-pagination-current-page']);
                setPageCount(+res.headers['x-pagination-page-count']);
            })
    }, [page]);

[Александр]

Shurik, у роутера есть контекст, в котором хранятся основные значения. Хук useSearchParams в конечном итоге использует тот самый контекст. Поэтому неважно, в каком месте Вы влияете на роутинг - хуки отработают.

[Shurik]

Александр, спасибо!