Navigate to homepage and scroll to section id when clicking on menu items from another page

Question

I have a single page landing homepage containing components with id and a common menu across all pages. When I'm on "/" I'm using react-scroll to scroll down to the particular section. But when I click on the menu outside of "/home" it should first redirect to "/" then scroll to the clicked section id.

return (
  <Navbar collapseOnSelect expand="lg" bg="white" variant="white">
    <Container>
      <Navbar.Brand href="/home">
        <img src={images.logo} alt="logo" />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav" className="justify-content-end">
        <Nav>
          {data.Menu.map((item, index) => (
            <ScrollLink
              key={index}
              to={item.link}
              smooth={true}
              duration={100}
              offset={-100}
              className="nav-link"
            >
              {t(item.text)}
            </ScrollLink>
          ))}
        </Nav>

I tried window href redirect but the component only gets redirected to home theres no scroll.

The data file:

const Menu = [
  {
    text: "Home",
    link: "home",
  },
  {
    text: "About Us",
    link: "about-us",
  },

the app.js looks like this

<Route path="/" element={<MainContent />} /> 
<Route path="/home" element={<Navigate to="/" />} />
const MainContent = () => (
  <div>
    <ScrollBookmark />
    <Home />
    <AboutUs />
    <Capabilities />
    <Customer />
    <Solutions />
    <Process/>
    <Resc />
    <Blogs />
    <FAQ />
    <CTA />
    <Contact />
    
  </div>

Answer 1

Try something like this:

import { useNavigate } from "react-router-dom";

function Nav() {
    const navigate = useNavigate();

    return (
        <>
             <div onClick={() => {
                 navigate('/page', { // navigate to page (replace '/page' with the desired page name
                     state: {
                         section: 1 // sets variable to 1 and passes to linked page
                     }
                 })
             }>
             </div>
             <div onClick={() => {
                 navigate('/page', { // navigate to page (replace '/page' with the desired page name
                     state: {
                         section: 2 // sets variable to 2 and passes to linked page
                     }
                 })
             }>
             </div>
         </>
    )
}

import { useState } from "react";
import { useLocation } from 'react-router-dom';

    function Page() {
        const location = useLocation();
        const [ scrolled, setScrolled ] = useState(false);
        
        if (!scrolled) { // prevents infinite loop
            switch (location.state.section) { // scrolls to page based on section
                 case 1: window.scrollTo({ top: 0, behavior: "smooth" }); break;       
                 case 2: window.scrollTo({ top: 1000, behavior: "smooth" }); break; 
            setScrolled(true);
        }
    
        return( <>
        // page content here 
              </> 
              )
    }