时间戳

首页 > 解决方案 > 使用 react scoll 混合平滑滚动并链接到组件

reactjs - 使用 react scoll 混合平滑滚动并链接到组件

问题描述

我正在尝试同时链接到另一个组件以及使用反应滚动的平滑滚动。我可以单击登录并进入登录页面，但从登录页面无法进入主页。我点击主页，但没有任何反应。我想知道 React 滚动是否能够兼具两者？非常感谢任何帮助，并在此先感谢您。这是我的代码：

//BootstrapNavbar.js
import { Link } from "react-scroll";

<div className="collapse navbar-collapse" id="navbarCollapse">
  <div className="navbar-nav ml-auto">
    <Link
      href="/home"
      activeClass="active"
      to="intro"
      spy={true}
      smooth={true}
      duration={1000}
      className="nav-item nav-link"
    >
      Home
    </Link>
    <Link
      href="#"
      activeClass="active"
      to="about"
      spy={true}
      smooth={true}
      duration={1000}
      className="nav-item nav-link"
    >
      About Us
    </Link>
    <Link href="#" activeClass="active" className="nav-item nav-link">
      Portfolios
    </Link>
    <a href="/login" className="nav-item nav-link">
      Login
    </a>
    <Link
      href="#"
      activeClass="active"
      to="contact"
      spy={true}
      smooth={true}
      duration={1000}
      className="nav-item nav-link"
    >
      Contact
    </Link>
  </div>
</div>;

//Home.js
const Home = () => {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
};

//App.js
function App() {
  return (
    <div>
      <BootstrapNavbar />
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/login">
        <Login />
      </Route>
    </div>
  );
}

标签： reactjs

解决方案

我可以按照本教程使用 react-router-hash-link 解决上述问题

https://reactjsexample.com/hash-link-scroll-functionality-for-react-router/

推荐阅读