Как передавать данные между компонентами в React?

Пытаюсь понять как передать данные из одного компонента React в другой, но столкнулся с проблемой, что в Интернете, люди которые учат этому, используют примитивную систему без Router, что осложняет мою задачу. Есть компонент один:

    export const MainPage = () => {
    return (
        <form>
        <input type="text"></input>
        <input type="submit"></input>
        </form>
    )
}

И есть компонент два:

    export const ItemPage = () => {
    return (
        <div>
            <h1>
            </h1>
        </div>
    )
}

В компоненте один есть простейший инпут для ввода данных, а в компоненте 2 есть заголовок. Нужно чтобы данные инпута из компонента 1 передались в заголовок в компоненте 2 И естественно происходил переход в компонент 2 как при нажатии на ссылку (редирект), таким образом будет совершена передача данных, что мне и нужно. Но как же это сделать?