我正在尝试将 Ant Design List 与 List 项中另一个页面的链接一起使用:
<List
itemLayout="horizontal"
dataSource={users}
// renderItem={users.map(user => (
renderItem={item => (
<List.Item key={item.uid}>
<List.Item.Meta
title={item.name}
description={item.organisation}
/>
{item.email}
{<Link
to={{
pathname: `${ROUTES.USEROVERVIEW}/${item.uid}`,
state: { item },
}}
style={{ float:"right"}}
>
More
</Link>
}
</List.Item>
// )
)}
/>
如果我在不使用 Ant Design 的 css 模式中使用上面列出的链接路径,则它可以正常工作。
我已经定义了这样的路线:
export const USEROVERVIEW = '/userDetails/:id';
当我尝试跟踪 List.Item 内的链接时,它会在 userDetails 和 firebase 创建的 uid 之间插入一个额外的/:id 。
如果我导航到指定的路径名(即:userDetails/1),我可以呈现页面,但目前,单击 List.Item 中的链接会将我发送到 userDetails/:id/1。
如何让 Ant Design List Item 遵循我在链接中指定的路径名?