关于 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

对你有帮助吗？