реагируют-маршрутизатор-дом очищает реквизиты {history, match, location} при нажатии в приложении ssr - PullRequest
Новая
       12

реагируют-маршрутизатор-дом очищает реквизиты {history, match, location} при нажатии в приложении ssr

2 голосов
/ 31 марта 2020

Я не смог реализовать компонент Link в рендеринге на стороне сервера. 

<Link to={`/edit/${id}`}>
  <h3>{description}</h3>
</Link>

На странице /edit у меня есть эта строка кода для проверки пропущенных реквизитов: 

<h1>{props.match.params.id}</h1>

это выдает ошибку, потому что match prop не прошло.

Если я использовал <a></a> вместо <Link/> обернутой /edit страницы с withRouter Я получаю эти реквизиты, однако на этот раз я отключен от магазина.

Поскольку <Link/> перемещается внутри реагирующего маршрутизатора, похоже, что реквизиты, которые передаются компонентам, очищаются, когда я нажимаю <Link/>. Я не мог понять, как решить проблему.

Я добавил historyApiFallback:true к объекту devServer webpack.config, но это не решило проблему.

вот репозиторий

1 Ответ

4 голосов
/ 02 апреля 2020

Ваша точная ошибка - использование href prop для компонентаact-router Link. Вы должны использовать to, как показано ниже: 

<Link to={`/edit/${id}`}>
  <h3>{description}</h3>
</Link>

После исправления этой проблемы вы сразу попадете в другую проблему. вы получите его внутри EditExpensePage страницы: 

const mapStateToProps = (state, props) => {
  return {
    expense: state.expenses.find(
      expense => expense.id === props.match.params.id // here, you will get error the params of undefined
    )
  };
};

Вы получите ошибку params of undefined, потому что вы обертываете withRouter с помощью response-redux connect, на самом деле вы должны обернуть реагирующую приуменьшить connect на withRouter: 

export default withRouter(connect(mapStateToProps)(EditExpensePage));

После перемещения HO C завертывание ключа реквизита match не будет неопределенным.

...