我无法在服务器端渲染中实现链接组件。
<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
键不会是不确定的。