关于 React 路由器 dom

Question

希望你一切顺利。我有一个关于反应路由的问题。我在 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;

Answer 1

我明白你想要什么了。单击 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 存储库。

谢谢。

Answer 2

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

对你有帮助吗？

关于 React 路由器 dom

Regarding React router dom

reactjs

react-router

react-router-v4

react-router-dom