Hi there!
I build a one-page layout website with a sticky menu as you can see from the image below:
I want to jump to each section just by clicking the link in the menu.
I share the code hoping that somebody can help me to figure out why the page is white. see below:
Navbar.jsx
import { useTranslation } from 'react-i18next';
import LanguageSwitcher from '../../lang/switcher';
import { Link } from 'react-router-dom';
function Navbar() {
const { t } = useTranslation();
return (
<section className='navbar--section'>
<div className='navbar--wrapper'>
<ul>
<li><Link to="/">{t('menu.home')}</Link></li>
<li><Link to="/about">{t('menu.about')}</Link></li>
<li><Link to="/projects">{t('menu.project')}</Link></li>
<li><Link to="/services">{t('menu.services')}</Link></li>
<li><Link to="/contact">{t('menu.contact')}</Link></li>
<li><LanguageSwitcher /></li>
</ul>
</div>
</section>
);
}
export default Navbar;
app.jsx
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Navbar from './components/navbar/navbar';
import Header from './components/header/header';
import About from './components/About/about';
import Projects from './components/projects/projects';
import Services from './components/services/services';
import Contact from './components/contact/contact';
import Footer from './components/footer/footer';
import './App.css'
import './Styles.css'
function App() {
return (
<Router>
<div className="app">
<Navbar />
<Switch>
<Route exact path="/" component={Header} />
<Route path="/about" component={About} />
<Route path="/projects" component={Projects} />
<Route path="/services" component={Services} />
<Route path="/contact" component={Contact} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;
Thank you all!
P.