React router dom 链接没有滚动到页面的正确部分（根本没有滚动）

Question

我遇到一个问题，我用 React-router-dom 创建的导航栏不是“scrolling/taking”我到页面中的正确位置，事实上，它不是带我去任何地方。这是一个单页应用程序

这是我的 App 组件，我在其中设置了 Router 和每个组件的路径

import React, { useState, useReducer } from 'react'
import Footer from './Components/Footer';
import HeroSection from './Components/HeroSection'
import AboutMe from './Components/AboutMe';
import Projects from './Components/Projects';
import Modal from './Components/Modal';
import Form from './Components/Form'
import ScrollTop from './Components/ScrollTop';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import NavBar from './Components/NavBar'

function App() {

    const [show, setShow] = useReducer((p) => !p, false);

    const [data, setData] = useState()

    const handleData = (newData) => setData(newData)

    return (
        <div>
            <Router>
                <NavBar/>
                <Switch>
                    <Route path='/aboutme' component={AboutMe}/>
                    <Route path='/projects' component={Projects}/>
                    <Route path='/contact' component={Form}/>
                </Switch>
           </Router>
            <HeroSection/>
            <AboutMe/>
            <Projects setData={handleData} setShow = {setShow}/>
            <Modal data={data} show={show} setShow={setShow} />
            <Form/>
            <ScrollTop></ScrollTop>
            <Footer/>
        </div>
    )
            
}

export default App;

这是我的NavBar设置Links

import React, {useState} from 'react'
import {Link} from 'react-router-dom'
import * as FaIcons from 'react-icons/fa'
import * as AiIcons from 'react-icons/ai'
import {NavBarData} from './NavBarData'

const NavBar = () => {

    const [sideBar, setSideBar] = useState(false)

    const showSidebar = () => {
        setSideBar(!sideBar)
    }

    return(
        <>
            <div className="navbar">
                <Link to="#" className="menuBars">
                    <FaIcons.FaBars onClick={showSidebar}/>
                </Link>
            </div>
            <nav className={sideBar ? "navMenuActive" : "navmenu"}>
                <ul className="navMenuItems">
                    <li className="navbarToggle">
                        <Link to="#" className="menuBars">
                            <AiIcons.AiOutlineClose/>
                        </Link>
                    </li>
                    {NavBarData.map((item, index) => {
                        return(
                            <li key={index}>
                                <Link to={item.path}>
                                    <span>{item.title}</span>
                                </Link>
                            </li>
                        )
                    })}
                </ul>
            </nav>
        </>
    )
}

export default NavBar

我有一个单独的文件 NavBarData，我在其中存储每个 link

的数据

export const NavBarData = [
    {
        title: "About Me",
        path: "/aboutme"
    },
    {
        title: "Projects",
        path: "/projects"
    },
    {
        title: "Contact",
        path: "/contact"
    },
]

我在 codesandbox 中创建了一个迷你版本，它的工作方式已经够令人沮丧的了，但我仍然不明白我做错了什么。 https://codesandbox.io/s/modest-currying-3o9oq?file=/src/App.js

Answer 1

我终于找到了为什么它不起作用。显然在单页应用程序中，您需要滚动到页面中的某个点而不是导航，您应该使用 HashLink

我运行 npm install --save react-router-hash-link 并在我的 App.js 中使用了 HashRouter，将把代码留在这里以防有一天有人遇到类似的问题。

App.js

import React, { useState, useReducer } from 'react'
import Footer from './Components/Footer';
import HeroSection from './Components/HeroSection'
import AboutMe from './Components/AboutMe';
import Projects from './Components/Projects';
import Modal from './Components/Modal';
import Form from './Components/Form'
import ScrollTop from './Components/ScrollTop';
import { HashRouter as Router, Route, Switch } from 'react-router-dom'
import NavBar from './Components/NavBar'

function App() {

    const [show, setShow] = useReducer((p) => !p, false);

    const [data, setData] = useState()

    const handleData = (newData) => setData(newData)

    return (
        <div>
            <Router>
                <NavBar/>
                <Switch>
                    <Route path='/aboutme' component={AboutMe}/>
                    <Route path='/projects' component={Projects}/>
                    <Route path='/contact' component={Form}/>
                </Switch>
           </Router>
            <HeroSection/>
            <AboutMe/>
            <Projects setData={handleData} setShow = {setShow}/>
            <Modal data={data} show={show} setShow={setShow} />
            <Form/>
            <ScrollTop></ScrollTop>
            <Footer/>
        </div>
    )
            
}

export default App;

NavBar.js

import React, {useState} from 'react'
import {HashLink} from 'react-router-hash-link'
import * as AiIcons from 'react-icons/ai'
import * as FaIcons from 'react-icons/fa'
import {NavBarData} from './NavBarData'

const NavBar = () => {

    const [sideBar, setSideBar] = useState(false)

    const showSidebar = () => {
        setSideBar(!sideBar)
    }

    return(
        <>
            <div className="navbar">
                <HashLink to="#" className="menuBars">
                    <FaIcons.FaBars onClick={showSidebar}/>
                </HashLink>
            </div>
            <nav className={sideBar ? "navMenuActive" : "navmenu"}>
                <ul className="navMenuItems">
                    <li className="navbarToggle">
                        <HashLink to="#" className="menuBars">
                            <AiIcons.AiOutlineClose/>
                        </HashLink>
                    </li>
                    {NavBarData.map((item, index) => {
                        return(
                            <li key={index}>
                                <HashLink to={item.path} smooth>
                                    <span>{item.title}</span>
                                </HashLink>
                            </li>
                        )
                    })}
                </ul>
            </nav>
        </>
    )
}

export default NavBar

编辑：

为此，您需要为要滚动的 section/element 提供 id 属性，而 HashLink 参数将采用 /#idgiventoelement

Answer 2

问题

显然，您正在尝试使用 react-router-dom 滚动到特定部分。

可能的解决方案

您可以只使用 a HTML 标签，将其 href 属性与 id.

部分一起使用

代码

sectionOne.js

function SectionOne() {
  return (
    <section id="sectionOne">
      children
    </section>
  )
}

export default SectionOne;

NavBarData.js

export const NavBarData = [
  {
      title: "About Me",
      path: "#sectionOne"
  }
]

NavBar.js


function NavBar() {
  return (
    {NavBarData.map((item, index) => (
      <li key={index}>
        <a href={item.path}>
          <span>{item.title}</span>
        </a>
      </li>
    )}
  )

export default NavBar;

额外小费

为此使用依赖项只会增加您的包大小，因此除非它确实有多个特定路径，否则没有必要安装。
使用CSS属性scroll-behavior: smooth可以实现滚动开始时的效果

React router dom 链接没有滚动到页面的正确部分（根本没有滚动）

React router dom links are not scrolling to the correct section of the page (not scrolling at all)

css

navigation

reactjs

react-router

react-router-dom

问题

可能的解决方案

代码

额外小费