stepbystep

Отправка формы на чистом JavaScript без использования jQuery:

// По готовности страницы, вешаем на форму обработчик onsubmit инлайново:

document.addEventListener('DOMContentLoaded', function() {
	document.querySelector('form#userForm').setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
});

// Функция для отправки формы на чистом JavaScript:

function form_send(form) {
	form.setAttribute('onsubmit', 'event.preventDefault();');
	var url = form.getAttribute('action') + '?nocache=' + new Date().getTime();
	var xhr = new XMLHttpRequest(); xhr.open('POST', url);
	xhr.onreadystatechange = function() {
		if (xhr.readyState === XMLHttpRequest.DONE) {
			form.setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
			if (xhr.status === 200) {
				alert('Форма успешно отправлена, ответ сервера: ' + xhr.responseText);
			}
			else {
				console.log('При отправке формы произошла ошибка, ниже объект с деталями ошибки:');
				console.dir(xhr);
				alert('При отправке формы произошла ошибка, детали смотрите в консоли.');
			}
		}
	}
	xhr.send(new FormData(form));
}

Обратите внимание, что в вашей форме обязательно должен присутствовать атрибут action!

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

Есть несколько способов его хранить и менять:

а) хранить данные в контексте и получать их и метод для их изменения путём подключения к контексту (см. useContext или contextType, в зависимости от функциональности/классовости компонента).
б) использовать сторонние решения для управления состоянием. На выбор redux, mobx, effector и прочие библиотеки.

Можно поместить data в контекст, ну и обращаться где захочется с помощью useContext.

И тогда получится что-то такое:

const AppMessageItems = () => {
  const { id } = useParams(); // react-router-dom hook
  const subset = useContext(YourContextName).find(item => item.id === id);

  return (
    <Container>
      <div> Id: {subset.id}</div>
      <div> Text: {subset.text}</div>
      ... 
    </Container>
  );
};