React Router 中的链接不允许我按预期导航

Question

我有一个应用程序，可以让你导航

/user=>/user/userid

一旦我在user/userid上，我想创建到/reports/reportid的链接

我正在使用这个代码

function ReportItem({ report }) {
const to = `reports/${report.id}`
return (
<li className='user'>
<Link to={to}>{report.date}</Link>
</li>
)
}

然而，这导致我导航到/users/reports/reportid而不是/reports/reportid。我不明白我在这里做错了什么。

Answer 1

@kluddizzcomment是正确的解决方案。我只需要更新配置以前缀为/，如下所示

function ReportItem({ report }) {
const to = `/reports/${report.id}` // <=== prefixed a / to fix issue
return (
<li className='user'>
<Link to={to}>{report.date}</Link>
</li>
)
}