同じページの別のreactコンポーネントへのリンク

debugcn 投稿 Dev

志望者

私は現在、Reactを使用してWebサイトを作成しています。私の計画は、たとえばaboutセクションのように、ページ上の別のコンポーネントにリンクするボタンを備えたナビゲーションバーを用意することです。browserrouterでそれを行うにはどうすればよいですか？

ありがとう

サビール・アーメド

これは最も簡単なアプローチです。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.main = React.createRef();
  }
  renderMain() {
    return (
      <div style={styles.component}>
        <div style={styles.home}>
          <h1>Home</h1>
        </div>
        <div style={styles.about} ref={this.main}>
          <h1>About</h1>
        </div>
      </div>
    );
  }
  handleScroll = e => {
    e.preventDefault();
    const main = this.main.current;
    window.scrollTo({
      top: main.offsetTop,
      left: 0,
      behavior: "instant"
    });
  };
  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <div>
            <div style={styles.nav}>
              <Link style={styles.link} to="/">
                Home{" "}
              </Link>
              <Link style={styles.link} onClick={this.handleScroll} to="/about">
                About{" "}
              </Link>
              <Link style={styles.link} to="/contact">
                Contact{" "}
              </Link>
            </div>

            <Switch>
              <Route exact path="/" component={() => this.renderMain()} />
              <Route exact path="/contact" render={() => <h1>Contact Us</h1>} />
              <Route render={() => <h1>Page not found</h1>} />
            </Switch>
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

実例を示すために、CodeSandboxで小さなデモを作成しました。

こちらをご覧ください：https：//codesandbox.io/s/ovlq4lpqp9

お役に立てれば。

編集：上記のコードで示したように、スクロールするコンポーネントに「ref」を割り当てる必要があり、スクロールイベントはナビゲーションリンクからのonClickイベントで処理する必要があります。

私はあなたを助けるために私のcodesandboxデモ（上記のリンクを参照）を更新しました。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]