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

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

/edit页面中,我具有以下代码行来测试通过的道具:
<h1>{props.match.params.id}</h1>

因为未传递匹配道具,所以会引发错误。

如果我使用和Router 来使用<a></a>而不是<Link/>包裹的/edit包装的<Link/>页面,我会获得这些道具,但是这次我与商店断开了连接。

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

我将ojit_code添加到webpack.config devServer对象中,但是它不能解决问题。

here is the repo

最佳答案

您的确切错误是将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 withRouter包裹了connect,实际上,您应该用connect包裹react-redux withRouter:
export default withRouter(connect(mapStateToProps)(EditExpensePage));

在移动HOC之后,包装的match键不会是不确定的。

08-15 20:53
查看更多