如何在 React App 中使用导航栏重新路由到页面然后滚动到元素？答案

【问题标题】：How to use a navbar in React App to reroute to a page then scroll to an element?如何在 React App 中使用导航栏重新路由到页面然后滚动到元素？
【发布时间】：2021-11-07 20:46:29
【问题描述】：

（已编辑）
我有一个反应应用程序，我想在每个页面上都有导航栏。所以我制作了一个导航栏组件并将其添加到每个新页面。在主页上，导航栏通过滚动到所选部分可以正常工作。但是，在任何其他页面上，导航栏都无法滚动到该部分，因为它没有找到。所以我的问题是，如何使导航栏可点击以重新路由到主页然后滚动到一个元素。

这里是简化的代码

导航栏代码

export default function navbar(){
    return(
        <div className="nav-container">
        <nav>
            <ul className="desktop-nav">
                    <li>
                        <a
                            className="link-logo" 
                            onClick = {() => {scrollTo('landing-page')}}
                        />
                    </li>
                    <li>
                        <a onClick = {() => {scrollTo('elem1')}}>elem1</a>
                    </li>
                    <li>
                        <a onClick = {() => {scrollTo('elem2')}}>elem2</a>
                    </li>
                    <li>
                        <a onClick = {() => {scrollTo('elem3')}}>elem3</a>
                    </li>
                </ul>
        </nav>
        </div>
    );
}
function scrollTo(elem){
    document.getElementById(elem).scrollIntoView(true);
}

主页代码

export default function Home(){
        return(
            <div>
                <div id = 'elem1'>elem1</div>
                <div id = 'elem2'>elem2</div>
                <div id = 'elem3'>elem3</div>
                <a href = '/somewhere'> Go to Second Page </a>
            </div>
        );
    }

应用路由器

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path = '/' component = {SITE} />
        <Route exact path = '/somewhere' component = {SECOND_PAGE}/>
      </Switch>
    </Router>
  );
}

export default App;

现在从显示为单独页面的 SECOND_PAGE 组件中，如何使导航栏链接转到 SITE 组件并滚动到指定的链接而不向 URL 添加任何内容。如果可能的话，我不希望用户能够看到我的 div ID 和类名。当我浏览这两个组件时，我希望 URL 是静态的。

【问题讨论】：

您可能想先通过react-router-dom在您的项目中实现路由/导航，然后链接到页面上的特定锚标记，添加react-router-hash-link。
我已经设置了 react-router-dom 来带我到不同的页面。 react-router-hash-link 似乎没有解决我遇到的问题。我想让导航链接转到主页并滚动到指定部分而不向 URL 添加任何内容。
嗯，你描述的你想要的（除了在 URL 中显示锚目标）正是哈希链接所做的。让用户查看他们将导航到的位置是否存在问题？我想您可以使用路由状态并指定滚动目标。您能否更新您的问题以包含相关的路由/导航代码，以便我们可以看到您如何呈现路线并尝试链接到主页？
您可以将导航栏组件传递到开关之外，以便它显示在每个页面上。我建议使用 react-router-dom 的 Link 标签而不是标签。
这个话题或许能帮到你stackoverflow.com/questions/33188994/…

标签： javascript html css reactjs navbar

【解决方案1】：

我建议将react-router-hash-link 添加到您的项目中，以允许链接/导航到页面，并通过id 属性滚动查看特定部分。

使用您的代码的示例：

import { Link, Switch, Route } from "react-router-dom";
import { HashLink } from "react-router-hash-link";

const NavBar = () => (
  <div className="nav-container">
    <nav>
      <ul className="desktop-nav">
        <li>
          <HashLink smooth to="/#">
            Home
          </HashLink>
        </li>
        <li>
          <HashLink smooth to="/#elem1">
            elem1
          </HashLink>
        </li>
        <li>
          <HashLink smooth to="/#elem2">
            elem2
          </HashLink>
        </li>
        <li>
          <HashLink smooth to="/#elem3">
            elem3
          </HashLink>
        </li>
      </ul>
    </nav>
  </div>
);

const Home = () => {
  return (
    <div>
      <div className="section" id="elem1">
        elem1
      </div>
      <div className="section" id="elem2">
        elem2
      </div>
      <div className="section" id="elem3">
        elem3
      </div>
      <Link to="/somewhere"> Go to Second Page </Link>
    </div>
  );
};

const SecondPage = () => <h1>Second Page</h1>;

export default function App() {
  return (
    <div className="App">
      <NavBar />
      <Switch>
        <Route path="/somewhere" component={SecondPage} />
        <Route path="/" component={Home} />
      </Switch>
    </div>
  );
}

【讨论】：