перенаправить на тот же компонент рендеринга

Question

Я использую тот же компонент Form для редактирования сообщения и добавления нового в мое приложение. ComponentDidMount Form выглядит следующим образом:

componentDidMount() {
    this.props.match ? this.props.dispa({
        type: 'ON_LOAD_ACTION',
        payload: this.props.fetch.data.find(x => x.id == this.props.match.params.id)
    }) : this.props.dispa({
        type: 'ON_RESET',
        payload: ''
    });
}

Он проверяет, есть ли в URL id, например, localhost:3000/edit/id

Я пытаюсь обновить сообщение. Я извлекаю данные поста и могу заполнить им форму. Если в URL нет id, я просто оставляю форму пустой. Вторая отправка предназначена для сброса состояния в его начальное состояние.

Я использую react-router / redux, и моя проблема в том, что я нахожусь в форме редактирования и нажимаю на форму создания. Он не рендерится заново, и я получил значение поста, в котором я находился. Я думаю, что это потому, что я перенаправляю на ту же форму.

     <Route exact path="/create" >
       <FromProduct />
       </Route>
     <Route exact path="/edit/:id" component={FromProduct}></Route>

Но если я нажму submit Кнопка, чтобы обновить сообщение или I go до /home вначале, компонент прекрасно рендерится.

Answer 1

Есть разные способы увидеть проблему:

1. React-router не отключает компонент FromProduct при каждом изменении маршрута. Это вызывает поведение, которое вы описали, вы всегда видите один и тот же компонент. Вы можете попытаться выполнить повторный рендеринг с помощью встроенной функции.
2. Поскольку ваш componentDidMount больше не вызывается, вы можете использовать componentWillReceiveProps для компонента FromProduct. Таким образом, для каждого изменения маршрута он будет выполняться, даже если он был смонтирован, потому что теперь он будет получать новые реквизиты.

Решение № 1 на самом деле не рекомендуется. Решение № 2 будет делать что-то вроде этого:

componentWillReceiveProps(newProps) {
  // very similar logic for componentDidMount
  // but use newProps instead of this.props
}

Если вы все еще хотите попробовать Решение № 1, пожалуйста, проверьте документацию React Router о встроенном рендеринге здесь .