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

Question

我遇到了一个问题，即使用 React-router-dom 创建的导航栏没有“滚动/带”我到页面中的正确位置，事实上，它根本没有带我到任何地方。这是一个单页应用程序

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

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;

这是我的NavBarLinks，我在这里设置了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 我存储每个链接的数据

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

我在代码沙箱中创建了一个小型版本，这种工作方式令人沮丧，但我仍然无法理解我做错了什么。 https://codesandbox.io/s/modest-currying-3o9oq?file=/src/App.js

Answer 1

? 问题

显然，您正在尝试使用 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;

?额外提示

1. 为此使用依赖只会增加你的包大小，所以除非它真的有不止一个特定的路线，否则没有必要安装。

2. 使用CSS属性scroll-behavior: smooth，可以在滚动开始时做出效果。

Answer 2

我终于知道为什么它不起作用了。显然，在您需要滚动到页面中的某个点而不是导航的单页应用程序中，您应该使用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

编辑：

为此，您需要为要滚动的部分/元素提供id 属性，HashLink to 参数将采用/#idgiventoelement