使用 react-router-dom 处理路由和指向 id 的链接答案

【问题标题】：Use react-router-dom to handle routes and links to ids使用 react-router-dom 处理路由和指向 id 的链接
【发布时间】：2019-03-07 06:41:14
【问题描述】：

我正在使用 react-router-dom，为了防止在路由之间导航时刷新整个页面，我正在使用 NavLink 组件。这适用于像“/contact”这样的路由，但是它不会处理到具有 id 的特定部分的链接，例如 /contact#main。有没有办法在继续使用 NavLink 的同时，仍然可以使用指向特定部分的链接？

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

在 react-router-dom 中可以使用like

<Link
to={{
pathname: "/contact",
hash: "#main",
state: { ...}
}}
/>

【讨论】：

这会在 url 中正确设置路由，但我被发送到 /contact 的顶部，而不是 /contact#main。如果我刷新页面，它会加载到 /contact#main。

【解决方案2】：

显然这是 react-router 库的一个已知问题，可以添加一个额外的库来解决该问题：

react-router-hash-link

【讨论】：