如何解决关于 React 路由器 dom
希望你做得很好。我有一个关于反应路由的问题。我在 app.js 文件中一一定义了 5 个组件,并为其创建了路由,如 app.js 文件中所示,并为其创建了标头以及 header.js 文件中所示。但问题是当我应该单击标题中定义的第 4 个组件时,焦点应该靠近第 4 个组件,而不是在第 5 个组件下方显示第 4 个组件。供参考,如果您不理解我的问题,我将提供一个网站链接,我想像这个网站一样进行路由。
Refernce Website link
https://www.styleshout.com/templates/preview/Ceevee_2_0_0/
Note: I have completed this issue,for solution please check this link
https://github.com/pajjwal1/Resume
***App.jS***
import './App.css';
import { Route,Switch} from 'react-router-dom'
import Header from './Components/Header/header';
import Home from './Components/Home/home'
import Bg from './Asset/header-bg.jpg'
import About from './Components/About/about'
import Technical from './Components/Technical/technical'
import Project from './Components/Project/project'
import Education from './Components/Education/education'
import Personal from './Components/Personal/personal'
function App() {
return (
<div className="App">
<Header />
<Home background = {Bg}/>
<About />
<Technical />
<Project />
<Education />
<Personal />
<Switch>
<Route path='/home' exact component={Home}></Route>
<Route path='/about' component={About}></Route>
<Route path='/technical' component={Technical}></Route>
<Route path='/project' component={Project}></Route>
<Route path='/education' component={Education}></Route>
<Route path='/personal' component={Personal}></Route>
</Switch>
</div>
);
}
export default App;
***header.js***
import React from 'react';
import '../Header/header.css'
import {NavLink} from 'react-router-dom'
function header(){
return (
<div className="header">
<div className="header_center">
{/* <p>Home</p>
<p>About</p>
<p>Technical Expertiese</p>
<p>Projects</p>
<p>Qualification</p>
<p>Personal Details</p> */}
<NavLink className='nav-item' to='/home'>Home</NavLink>
<NavLink className='nav-item' to='/about'>About</NavLink>
<NavLink className='nav-item' to='/technical'>Technical Expertiese</NavLink>
<NavLink className='nav-item' to='/project'>Projects</NavLink>
<NavLink className='nav-item' to='/education'>Qualification</NavLink>
<NavLink className='nav-item' to='/personal'>Personal Details</NavLink>
</div>
</div>
);
}
export default header;
解决方法
我知道你想要什么。单击标题的导航项时是否要滚动到组件?
在这种情况下,您应该使用哈希路由器。
请将 id 放在要在页面上导航的每个组件。
并使用 # 进行哈希导航。
例如,如果您想导航到 projects
组件,请像这样使用。
<Link to="/#projects"> Projects </Link>
你是否用路由器包装过你的应用组件?
import { createBrowserHistory as history } from 'history'
...
<Router history={history()}>
...
<App />
...
</Router>
希望这能帮助您解决问题。
如果它不适合您,请联系我。 我相信我可以解决这种问题。
我会列出我在你的项目中更新的内容。
#app.js 移除带孩子的 Switch 包装器
...
{/* <Switch>
<Route path='/home' exact component={Home}></Route>
<Route path='/about' component={About}></Route>
<Route path='/technical' component={Technical}></Route>
<Route path='/#project' component={Project}></Route>
<Route path='/#education' component={Education}></Route>
<Route path='/personal' component={Personal}></Route>
</Switch> */}
...
#header.js 请使用标签而不是 Navlink
<a className='nav-item' href='/#home'>Home</a>
<a className='nav-item' href='/#about'>About</a>
<a className='nav-item' href='/#technical'>Technical Expertiese</a>
<a className='nav-item' href='/#project'>Projects</a>
<a className='nav-item' href='/#education'>Qualification</a>
<a className='nav-item' href='/#personal'>Personal Details</a>
...
并且您应该将 id 放在每个组件上,就像 project
组件一样。
如果它不起作用,请告诉我或邀请我加入您的 GitHub 存储库。
谢谢。
,当您单击标题上的导航项时,您是否要向下滚动到组件? 为此,您可以使用哈希路由器。 有关更多详细信息,您可以参考此站点。 https://paulgrajewski.medium.com/using-context-and-hashrouter-in-react-87afcefc5966
对你有帮助吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。