1

I currently have a React-powered site that doesn't use routing at the moment because all content is on one page. The site uses the react-scroll component to perform smooth scrolling to an in-page anchor when a menu item is clicked. The URL also updates to include a hash. Here's the site I'm talking about.

I'm now working on adding a new "Blog" menu item that will go to a separate page, so I need to get react-router involved. Here's what my routing looks like:

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

This works just fine for navigating to the blog. The problem is getting from the blog back to a particular section of the home page. Clicking on "About Me" from the blog will take me back to home, but it will not take me to the "About Me" section.

Here's how I create the links on the Blog page:

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>
  );
}

Any ideas on how achieve this?

Thx.

donnapep
  • 500
  • 6
  • 19
  • Possible "duplicate": http://stackoverflow.com/questions/35043528/how-to-get-parameters-from-hash-url-with-react-routers, http://stackoverflow.com/questions/28893855/how-to-use-normal-anchor-links-with-react-router?rq=1, Also, see https://github.com/reactjs/react-router/issues/394. Bottom line, AFAICT: the Route and page can get the hash and do what they will with it. – Ed Staub Aug 05 '16 at 23:59

0 Answers0