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

Question

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

这里是简化代码

导航栏代码

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 组件，如何让导航栏 link 转到 SITE 组件并滚动到指定的 link 而不添加任何内容到 URL。如果可能的话，我不希望用户能够看到我的 div ID 和类名。当我浏览这两个组件时，我希望 URL 是静态的。

Answer 1

我建议将 react-router-hash-link 添加到您的项目以允许 linking/navigating 到页面，并通过 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>
  );
}

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

How to use a navbar in React App to reroute to a page then scroll to an element?

html

javascript

css

navbar

reactjs

导航栏代码

主页代码

应用路由器