Ссылка на другой компонент реакции на той же странице

Question

В настоящее время я использую React для создания веб-сайта. Мой план состоит в том, чтобы иметь панель навигации, на которой есть кнопки для ссылки на другой компонент на странице, например, на раздел о программе. Как я могу сделать это с browserrouter?

Спасибо

Answer 1

Это может быть самый простой подход:

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 из ссылки навигации, как я показал в приведенном выше коде.

Я обновил демо-версию коды и коробки (см. Ссылку выше), чтобы помочь вам.