问题描述
在没有解决这个问题的情况下,我查过的所有内容似乎都可以正常工作,也没有具体说明这个问题。
这是我的 NavBar.js
import React from 'react';
import { hashlink } from 'react-router-hash-link';
import apps from '../project.json';
import { categories } from '../helpers/categories';
import '../styling/navbar.css';
export const NavBar = ({selectFromNav}) => {
// event handlers
return (
<nav className="navbar-wrapper" id="top">
<input type="checkBox" id="check" />
<label htmlFor="check" className="hamburger-button"><i className="fas fa-bars"></i></label>
<ul className="navbar-ul">
<div className="navlink"><a href="https://github.com/Sebastian-Russo" rel="noreferrer" target="_blank">Github</a></div>
<div className="navlink"><hashlink smooth to="top">Top</hashlink></div>
<div className="navlink"><hashlink smooth to="projects">Projects</hashlink></div>
<div className="navlink"><hashlink smooth to="contact">Contact</hashlink></div>
<div className="navlink">Total Projects: {apps.length}</div>
</ul>
</nav>
)
}
这是我的 App.js
import React,{ useState } from 'react';
import { browserRouter as Router,Route,Switch } from "react-router-dom";
import { AppWrapper } from './app-wrapper';
import { NavBar } from './navbar';
import { About } from './about';
import { Footer } from './footer';
import projects from '../project.json';
import '../styling/App.css';
const App = () => {
// event handlers and other js logic
return (
<Router>
<div className="App">
<NavBar selectFromNav={selectFromNav} />
{/* <About />
<AppWrapper selected={selected} />
<Footer /> */}
<Switch>
<Route path="/top" component={About} />
<Route path="/projects" render={props =>
<AppWrapper {...props} selected={selected} />
}/>
<Route path="/contact" component={Footer}
// scroll={(el) => el.scrollIntoView({ behavior: 'instant',block: 'end' })}
/>
</Switch>
</div>
</Router>
);
}
export default App;
解决方法
根据 React Router Hash Link 的文档:
当您单击使用 react-router-hash-link 创建的链接时,它将滚动到页面上具有与链接中的 #hash-fragment 匹配的 id 的元素。
在您的 NavBar.js 中,您没有使用 # 作为链接,
<div className="navlink"><HashLink smooth to="#top">Top</HashLink></div>
<div className="navlink"><HashLink smooth to="#projects">Projects</HashLink></div>
<div className="navlink"><HashLink smooth to="#contact">Contact</HashLink></div>
,
正如文档所说,您是新的 BrowserRouter,但您不需要 Switch 和 Route,这会一次渲染一个组件而不是显示所有组件。
<Router>
<div className="App">
<NavBar />
<About />
<AppWrapper selected={selected} sortProjects={sortProjects} />
<Footer />
</div>
</Router>
现在它显示了一切。