Как передать функцию при связывании с React Router?

Question

В моем приложении React у меня есть страница со списком веб-элементов (WebItems.js), а на странице есть Link, который переходит на страницу для добавления нового веб-элемента (Add.js).

const WebItems = () => (
       async function getWebItems() {
        const result = await httpGet('webitem/list');
        if (result.items) {
            setWebItems(result.items);
        }
    }

    return <>
         <Link
            to="webitem/list"
            Add
        </Link>
      </>
)

Мне нужно передать функцию getWebItems() компоненту Add, чтобы после добавления веб-элемента список веб-элементов обновлялся.

Я более знаком с @reach/router хотя мне нужно использовать react-router-dom для этого проекта.

Я нашел это сообщение в блоге , но я не уверен, что это то, что мне нужно.

Может ли кто-нибудь помощь?

Answer 1

Вы можете использовать состояние маршрута и форму объекта to prop для Link.

const WebItems = () => (
  async function getWebItems() {
    const result = await httpGet('webitem/list');
    if (result.items) {
      setWebItems(result.items);
    }
  }

  return <>
    <Link
      to={{
        pathname: "webitem/list",
        state: {
          getWebItems,
        },
      }}
    >
      Add
    </Link>
  </>
);

Используйте location из свойства маршрута на принимающем маршруте / компоненте

const { getWebItems } = props.location.state;

...

getWebItems();

Answer 2

Почему бы вам просто не сделать эту функцию настраиваемой ловушкой и повторно использовать ее?

// useWebItems. js

import { useState } from 'react';

function useWebItems() {

const [webItems, setWebItems] = useState([]);

async function getWebItems() {
  const result = await httpGet('webitem/list');
  if (result.items) {
    setWebItems(result.items);
    }
  }

return { getWebItems, webItems };

}

export default useWebItems;

// Добавить компонент

import { getWebItems, webItems } from 'path/to/useWebItems.js';

// Do whatever you want with getWebItems, webItems