반응 스크롤 탐색으로 표시되는 구성 요소를 가져올 수 없습니다.

동일한 페이지의 다른 섹션으로 이동하기 위해 react-scroll을 사용하고 있습니다. 튜토리얼을 따라 왔고 모든 것이 작동하지만 각 섹션에 더미 텍스트가 있으며 이제 콘텐츠를 내 구성 요소로 변경하는 방법을 모르겠습니다. 기본적으로 세 가지 구성 요소가 있고 웹 페이지의 각 섹션에 하나를 표시하고 싶지만 작동하지 않습니다. 나는 싶지 않아 title, subtitle, dark각 섹션에 등. 대신 해당 섹션에 전체 구성 요소를 넣고 싶습니다.

누군가가 각 섹션에 내 구성 요소 중 하나를 배치하는 방법을 보여줄 수 있습니까 (세 개의 구성 요소와 세 개의 섹션이 있음)? 이것이 가능합니까 아니면 section.js에 표시된 것과 같이 콘텐츠가 다른 부분으로 분리되도록 웹 사이트를 재구성해야합니까?

중요 : 내가 이해하지 못하는 부분은 Section.js에서 내 콘텐츠를 연결하는 방법입니다.

Section.js

import React from "react";

export default function Section({ title, subtitle, dark, id }) {
  return (
    <div className={"section" + (dark ? " section-dark" : "")}>
      <div className="section-content" id={id}>
        <h1>{title}</h1>
        <p>{subtitle}</p>
      </div>
    </div>
  );
}

App.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
        <Section
          title="section1"
          subtitle={dummyText}
          id="section1"
        />
        <Section
          title="section2"
          subtitle={dummyText}
          dark={false}
          id="section2"
        />
        <Section
          title="section3"
          subtitle={dummyText}
          dark={true}
          id="section3"
        />
      </div>

Navbar.js

 <nav className="nav" id="navbar">
        <div className="nav-content">
          <button
            className="nav-logo"
            alt="Logo"
            onClick={this.scrollToTop}
          >Top</button>
          <ul className="nav-items">
            <li className="nav-item">
              <Link
                activeClass="active"
                to="section1"
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
              >
                About
              </Link>
            </li>