React Navigation Router Issue!

[Plee]

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.

[lasjorg]

Post a repo or a StackBlitz/CodeSandbox.

What version of react-router-dom are you using? The V5 and V6 APIs do not work the same way.

Upgrading from v5 v6.11.1

What do you mean by “jump to each section”? You have route navigation, which is basically just components rendering at different URLs.

[Plee]

I mean the anchor link. Look this

I hope my explanation is clear enough

[lasjorg]

But you do not have fragment links (href="#some-section") in the code you posted, you have route links.

The link:

<Link to="/about">{t('menu.about')}</Link>

Will match the path and render the component:

<Route path="/about" component={About} />

---

It is a SPA app, there is no scrolling to a section, only rendering components. Not unless you have some other code you didn’t post.

Post a repo with all the code.

Edit: Just to be clear. If you just want a bunch of sections on a single page that you scroll to you do not need a router.

[Plee]

Hi there! I actually solved installing npm install react-scroll - it works just like the anchor tag.

Thank you for the help.
P

[lasjorg]

I’m not sure what that has to do with using a router to navigate between components. There is nothing stopping you from using plain a elements with React for fragment links. That lib is JS scroll code and you do not need that just to smooth scroll to sections.