Question

我目前有一个React驱动的网站，目前不使用路由，因为所有内容都在一个页面上。当单击菜单项时，该站点使用react-scroll组件执行平滑滚动到页内锚点。 URL也会更新以包含哈希。这是the site我在谈论。

我现在正在努力添加一个新的“博客”菜单项，该菜单项将转到单独的页面，因此我需要让反应路由器参与其中。这是我的路由的样子：

<Router history={history}>
  <Route path="/" component={App}>
    <IndexRoute component={Home} />
    <Route path="blog" component={BlogContainer} />
    <Route path="blog/:slug" component={Single} />
  </Route>
</Router>

这适用于导航到博客。问题是从博客回到主页的特定部分。点击博客上的“关于我”会将我带回家，但不会将我带到“关于我”部分。

以下是我在博客页面上创建链接的方法：

if (item.id !== "blog") {
  return (
    <li key={item.name}>
      <Link to={"/#" + item.url} activeClassName="current">
        <i className={item.icon}></i>{item.name}
      </Link>
    </li>
  );
}
else {
  return (
    <li key={item.name}>
      <Link to={item.url} activeClassName="current">
        <i className={item.icon}></i>{item.name}
      </Link>
    </li>
  );
}

关于如何实现这一点的任何想法？

THX。

使用hashes with react-router browserHistory

0 个答案: