Как я могу передать функцию в маршрут с формой, которая запускается после отправки и устанавливает состояние в предыдущем маршруте?

Question

Контекст

У меня есть небольшое приложение, в котором вы в основном можете отправлять идеи.Он существует из Home компонента, который представляет идеи в состоянии.

И еще один компонент, к которому пользователь имеет доступ через маршрут React-Router, где он видит небольшую форму и может представить новую "идею".

Вопрос

Я несколько раз сталкивался с этой проблемой, и теперь я хочу ее решить.Как я могу отправить эту форму, вернуться к домашнему компоненту, этот компонент извлекает из формы «заголовок» и «тело», создает новую идею и устанавливает состояние (повторное отображение) с новой идеей?

Дополнительная информация

В указанном домашнем компоненте я уже добавил эту функцию:

addNewIdea = (title, body) => {
    const newIdea = { id: 2, title, body, claimed: false, likes: 0 }
    this.setState({
        ...this.state.ideas,
        newIdea
    })
}

Что я могу с ней сделать?Я не могу напрямую передать его в "/ new / route right?

Так что же на самом деле должно произойти, когда пользователь нажимает" submit "в форме на" / new "маршруте? Он должен перенаправить обратно домой(с введенной информацией), и Домашний Компонент должен получить это и повторно выполнить с новой Идеей.

Нужно ли мне Redux для этого или это работает с пустым React?

NewIdea Компонент выглядит так:

return (
        <div className="new-idea-container">
            <div className="new-idea-box">
                <h2 className="new-idea-title">Create a new IDEA</h2>
                <input className="new-idea-input-title" type="text" placeholder="Title" value={this.state.title} onChange={(e) => this.setState({ title: e.target.value })} />
                <div contentEditable className="new-idea-textarea" placeholder="Write a detailled Description of your IDEA" onChange={(e) => this.setState({ body: e.target.value })}>{this.state.body}</div>
                <div className="new-idea-btn-wrapper">
                    <input className="new-idea-submit-btn" type="submit" value="Submit" onClick={this.handleSubmitBtn} />
                    <Link className="new-idea-cancel-btn" to="/">
                        <input className="new-idea-cancel-btn" type="submit" value="Cancel" />
                    </Link>
                </div>
            </div>
        </div>
    )

Просто ссылка, которая возвращает пользователя, когда он нажимает кнопку отправки.

Вот мои маршруты:

render() {
return (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route exact path="/new" component={NewIdea} />
    </div>
  </Router>
);
}

Еще один пример того, чего я хочу достичь:

Представьте, что у меня есть компонент Home, который имеет в качестве состояния массив идей (объектов). Теперь без React Router я бы сделал это такthis.

Создайте новый Компонент AddIdea - для этого передается функция обратного вызова в качестве реквизита (из вышеприведенного addNewIdea). Дочерний компонент AddIdea теперь получает заголовок и тело от пользователя ипосле нажатия кнопки отправки я запускаю функциюреквизит, который будет обновлять состояние в родительском компоненте.

Но я не могу сделать это в реагирующем маршрутизаторе.По крайней мере, я не знаю об этом, поэтому я спрашиваю, может быть, есть и другой способ обойти этоТам должно быть, верно?

Вот весь проект: https://github.com/dhuber666/Ideas