react-router-dom <Link/> 在 ssr 应用程序中单击时正在清除 {history,match,location} 道具

Question

我无法在服务器端渲染中实现 Link 组件。

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

在/edit页面，我有这行代码来测试通过的props：

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

这会引发错误，因为 ma​​tch 属性未通过。

如果我使用<a></a> 而不是<Link/> 包裹/edit 页面与withRouter 我得到了这些道具但是这次我与商店断开连接。

由于<Link/> 在 react-router 内部导航，因此当我单击 <Link/> 时，传递给组件的道具似乎被清除了。我不知道如何解决这个问题。

我将historyApiFallback:true 添加到 webpack.config devServer 对象，但它没有解决问题。

here is the repo

Answer 1

您的确切错误是使用 href 属性作为 react-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 错误，因为你使用react-redux connect 包装withRouter，实际上你应该用withRouter 包装react-redux connect：

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

移动 HOC 后，包裹 match 键的 props 不会被定义。