关于 React 路由器 dom

Regarding React router dom

希望你一切顺利。我有一个关于反应路由的问题。我在 app.js 文件中一个接一个地定义了 5 个组件,并为其创建了路径,如 app.js 文件中所示,并为此创建了 header 以及 header.js 文件中所示.但问题是,当我应该单击 header 中定义的第 4 个组件时,焦点应该靠近第 4 个组件,而不是在第 5 个组件下方显示第 4 个组件。作为参考,我给了一个网站 link 如果你不明白我的问题,我想像这个网站一样进行路由。

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;

我明白你想要什么了。单击 header 的导航项时是否要滚动到组件? 在这种情况下,您应该使用散列路由器。 请将 id 放入您要在页面上导航的每个组件。 并使用 # 进行哈希导航。 例如,如果您想导航到 projects 组件,请像这样使用。

<Link to="/#projects"> Projects </Link>

你有没有用 Router 包装你的应用程序组件?

import { createBrowserHistory as history } from 'history'
...

<Router history={history()}>
   ...
   <App />
   ...
</Router>

希望本文能帮助您解决问题。

如果它不适合你,请与我联系。 我相信我可以解决这种问题。

我将列出我在您的项目中更新的内容。

#app.js 使用 children

删除 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>
...

并且您应该像 project 组件一样在每个组件上放置 id。

如果它不起作用,请告诉我或邀请我加入您的 GitHub 存储库。

谢谢。

单击 header 上的导航项时是否要向下滚动到组件? 为此,您可以使用哈希路由器。 有关更多详细信息,您可以参考此站点。 https://paulgrajewski.medium.com/using-context-and-hashrouter-in-react-87afcefc5966

对你有帮助吗?