reactjs - 在 React 中获取路由中的错误
问题描述
我的路由出现异常问题。我有一个主页,然后在主页的中层,我有一个关于页面的链接。当我单击它时,会将我重定向到关于页面的中间级别。为什么它没有把我带到关于页面的顶层。我想我已经在主页滚动,因为它也在关于页面中滚动我不知道这是一个非常奇怪的问题。我在这里提供我的导航项目和我所有的链接代码。如果可以的话,请给我一个解决方案。
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
解决方案
将此添加到您的 App 组件中:
const location = useLocation();
useLayoutEffect(() => {
window.scrollTo(0, 0);
}, [location.pathname]);
推荐阅读
- ios - segue 后页面视图大小不正确
- javascript - jQuery 脚本有冲突
- kubernetes-ingress - Istio 入口网关,收到 403 禁止错误
- javascript - 如何在javascript中触发对元素的点击
- javascript - 无法将 php 变量解析为 javascript 可读变量
- share - Fancybox 3 使用 api 方法和分享按钮打开
- python - 在 python 中搜索 2d 列表中的元组
- java - 如何通过JavaFX上的按钮列表并根据所述按钮的数据显示场景
- django - 如何修复“django ImproperlyConfigured 异常:请求的设置,您必须定义环境变量 DJANGO_SETTINGS_MODULE。”
- javascript - Is there a way in Javascript to select elements matching a boolean expression of multiple class names?