Изменить маршрут на Modal Open - React

Question

Есть ли способ изменить маршрут при открытии модального объекта в React с использованиема- хочу обновить маршрут с помощью идентификатора изображения, чтобы я мог отправить запрос на получение на свой сервер с помощью идентификатора в req.params.id и извлечь изображение и другие связанные данные.

Также при модальном закрытии, Я хотел бы, чтобы меня перенаправили обратно в галерею.

Любая помощь будет высоко оценена, хороших выходных!

Answer 1

Да, вы можете. Например, у вас есть страница галереи ( / gallery ) с большим количеством изображений, а затем вы нажимаете на какое-то изображение. Он должен быть заключен в следующую ссылку:

<Link to={'/gallery/${image.id}`}>
  <img src={image.src} alt={image.alt} />
</Link>

В конце компонента галереи необходимо добавить следующий код

<Route
  path="/gallery/:id"
  children={({ match }) => {
    return (
      <Modal onClose={onClose} isOpened={Boolean(match)}>
        <ImageModalContent id={match && match.params.id} />
      </Modal>
    );
  }}
/>

Основной прием - использование дочерних свойств. См. Документацию

Иногда вам необходимо выполнить рендеринг, соответствует ли путь местоположению или нет. В этих случаях вы можете использовать функцию children prop. Он работает точно так же, как и рендер, за исключением того, что он вызывается независимо от того, есть совпадение или нет. Цитата

Если путь работает для текущего URL, сопоставление - это объект, который содержит идентификатор изображения, и если путь не работает для текущего пути, сопоставление равно нулю. Для вас достаточно кейса

А внутри ImageModalContent на componentDidMount вы можете загрузить любые данные, какие хотите

Более подробную информацию вы можете найти в этом видео

RU: https://youtu.be/RYo3kwdDdBI RU: https://youtu.be/4YHnZSMo9vo

Answer 2

Вы могли бы сделать метод, который использует перенаправление на функцию щелчка, а затем включить useEffect и pu sh его на URL, позвольте мне объяснить это:

const [ redirect, setRedirect ] = useState(null)

useEffect(() => {
    history.push(redirect)
}, [ redirect ];


<Button onClick={() => setRedirect(image.id)}>
    Image here
</Button>

Возможно, есть некоторые ошибки а ты понял?