Scroll.Link not working unless a component's inner parent element has a matching id attribute?

[jaegz]

Using Scroll.Link and setting the name attribute on my components in App.js was not working for me until I set an id attribute inside the component I was targeting. In order to dynamically patch this I had to pass the name down as props.name and set the id attribute on my wrapping element. Seems like some kind of strange bug is happening in order for me to go this route to get things working, unless I am overlooking something here?

Navigation.js

import React from 'react';
import Scroll from 'react-scroll';
let Link = Scroll.Link;

function Navigation() {
	return (
	      <nav>
	        <ul>
			<li><Link activeClass="active" to="anchor-box1" ></Link></li>
			<li><Link activeClass="active" to="anchor-box2" ></Link></li>
			<li><Link activeClass="active" to="anchor-box3" ></Link></li>
	        </ul>
            </nav>
	);
}
export default Navigation;

Box1.js

import React from 'react';

function Box1(props) {
	return (
		<section id={props.name} >
			<header>
			     <h4>This is the header</h4>
			</header>
			<article>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias magnam at ipsa iure, eligendi corporis libero vero. Dicta culpa dolorum aliquid ipsam, sequi pariatur! Sequi illum cupiditate nemo corporis, deleniti.</p>
			</article>
		</section>
	);
}

export default DetailsList;

App.js

import React, { Component } from 'react';
import Navigation from './Navigation';
import Box1 from './Box1';
import Box2 from './Box2';
import Box3 from './Box3';
import Footer from './Footer';
import './../App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navigation />
        <Box1 name="anchor-box1"/>
        <Box2 name="anchor-box2"/>
        <Box3 name="anchor-box3"/>
        <Footer />
      </div>
    );
  }
}

export default App;

[fisshy]

Yes, that seems wierd, name on your component should be enough.

[yunanelfath]

currently looking for this too and found something <Link containerId="{$parent-scroll-should-be-string-id}" to="test1" spy={true} smooth={true} offset={50} duration={500} >Test back</Link>

[caseyjkey]

Thank you so much! Passing the name prop down to my component's render function and assigning it to the parent element, a div, fixed my issue. Thanks!

[JNotelddim]

+1 -- I was needing a containerId