在 React 中获取路由中的错误

Question

我的路由出现异常问题。我有一个主页，然后在主页的中间层，我有一个关于页面的 link。当我点击它时，我将重定向到关于页面的中层。为什么它没有将我带到关于页面的顶层。我想我已经在主页中滚动了，因为它也在关于页面中滚动了。我不知道这是一个非常奇怪的问题。我在这里提供我的导航项目和我所有的链接代码。如果可以请给我一个解决方案

import React, { Component } from 'react'
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
import Nav from './Components/Nav'
import Home from './Components/Home'
import About from './Components/About'
import Project from './Components/Project'
import Skills from './Components/Skills'
import Services from './Components/Services'
import Contact from './Components/Contact'

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Nav />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/service" component={Services} />
          <Route path="/project" component={Project} />
          <Route path="/skill" component={Skills} />
          <Route path="/contact" component={Contact} />
          <Redirect to="/" />
        </Switch>
      </BrowserRouter>
    </>
  )
}
export default App

import React, { useState } from 'react'
import { NavLink, Link } from 'react-router-dom'
import Mode from './Mode'
import Button from '@material-ui/core/Button'

const Nav = () => {
  const [icon, setIcon] = useState(false)
  const [open, setClose] = useState(false)
  function Nav() {
    document.querySelector('#NavLinks').style.transform = 'scaleX(1)'
    setClose(!open)
    setIcon(!icon)
  }
  function NavClose() {
    document.querySelector('#NavLinks').style.transform = 'scaleX(0)'
    setClose(!open)
    setIcon(!icon)
  }
  return (
    <>
      <nav data-aos="fade-in">
        <div id="Container">
          <div id="NavContentWrapper">
            <h2 id="NavTitle">
              <Link to="/">DevR</Link>
            </h2>
            <ul id="NavLinks">
              <li>
                <NavLink exact activeClassName="active" to="/">
                  Home
                </NavLink>
              </li>
              <li>
                <NavLink activeClassName="active" to="/about">
                  About
                </NavLink>
              </li>
              <li>
                <NavLink activeClassName="active" to="/service">
                  Service
                </NavLink>
              </li>
              <li>
                <NavLink activeClassName="active" to="/project">
                  Projects
                </NavLink>
              </li>
              <li>
                <NavLink activeClassName="active" to="/skill">
                  Skills
                </NavLink>
              </li>
              <li>
                <NavLink activeClassName="active" to="/contact">
                  Contact
                </NavLink>
              </li>
              <li>
                <Mode />
              </li>
            </ul>
            <div id="Bar">
              <Button
                variant="outlined"
                color="primary"
                onClick={open ? NavClose : Nav}
              >
                {icon ? (
                  <i className="fas fa-times"></i>
                ) : (
                  <i className="fas fa-bars"></i>
                )}
              </Button>
            </div>
          </div>
        </div>
      </nav>
    </>
  )
}
export default Nav

Answer 1

将此添加到您的 App 组件：

const location = useLocation();
 
useLayoutEffect(() => {
    window.scrollTo(0, 0);
}, [location.pathname]);

在 React 中获取路由中的错误

Getting bugs in Routing in React

router

reactjs

react-router