0

So I originally created a smooth scroll effect with regular HTML css and js, but I'm trying to convert it into react, but I'm not sure if I am doing it properly.

I have a Navbar component and just set the path

  <NavLinks to='/#posts'>Posts</NavLinks>

Then I have my Main Content sections which are reusable components that receive data and display a different design based on what data I pass in.

      function InfoSection({
        lightBg,
        id
      }) {
        return (
          <>
            <div
              id={id} //Passed in the id value
              className={lightBg ? 'home__hero-section' : 'home__hero-section darkBg'}
            >
             // Rest of my JSX is inside here
            </div>
          </>
        );
      }

Then in my Data file I'll pass in the values

export const homeObjThree = {
 id: 'posts',
 lightBg: true,
}

Then I display my reusable components in my index.js page

  function Home() {
   return (
     <>
     <InfoSection {...homeObjThree} />
     </>
   );
  }

Then I import that into my App.js file

      function App() {
        const [isOpen, setIsOpen] = useState(false);

        const toggle = () => {
          setIsOpen(!isOpen);
        };

        return (
          <Router>
            <Sidebar isOpen={isOpen} toggle={toggle} />
            <Navbar toggle={toggle} />
            <Home />
            <Footer />
          </Router>
        );
      }

So when I inspect, it shows the Home HTML with an id="posts" which I set from my data file, but when I click on the Post nav menu item it doesn't scroll down to the section. Nothing actually happens, so I can't tell if my approach even works for padding in ids into my data file or if I would need to write scroll functions to implement it.

Johnxr
  • 276
  • 6
  • 21
  • Are you using React Router? Where is `NavLinks` coming from? – sallf Sep 29 '20 at 22:39
  • it's just a styled component name, but yeah it's just a tag – Johnxr Sep 30 '20 at 01:40
  • A `Link` component from React Router? You unfortunately might need to use another plugin like `react-router-hash-link`. See if these help [Using Anchor Tags in React Router](https://stackoverflow.com/questions/48223566/using-anchor-tags-in-react-router-4) and [Using Anchors with React Router](https://stackoverflow.com/questions/40280369/use-anchors-with-react-router). – sallf Sep 30 '20 at 03:04
  • I found react-scroll package and it works fine now with the scroll, but my issue is that their activeClass isn't working. Have you used React scroll before? – Johnxr Sep 30 '20 at 03:16

0 Answers0